Add Array Form Field (#14935)

https://github.com/user-attachments/assets/93c48584-8b6c-4e44-8161-1026d056b7bf

packages/twenty-front/src/locales/af-ZA.po

@@ -455,6 +455,11 @@ msgstr "Voeg deurgee by"
 msgid "Add inputs to your form"
 msgstr "Voeg insette by jou vorm"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "Voer 'n waarde in om in die databasis te stoor"
 msgid "Enter agent name*"
 msgstr "Voer die agentnaam in*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/ar-SA.po

@@ -455,6 +455,11 @@ msgstr "إضافة نقل"
 msgid "Add inputs to your form"
 msgstr "أضف المدخلات إلى النموذج الخاص بك"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "أدخل قيمة لتخزينها في قاعدة البيانات"
 msgid "Enter agent name*"
 msgstr "أدخل اسم الوكيل*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/ca-ES.po

@@ -455,6 +455,11 @@ msgstr "Afegeix Transferència"
 msgid "Add inputs to your form"
 msgstr "Afegeix elements d'entrada al teu formulari"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "Introdueixi un valor per emmagatzemar a la base de dades"
 msgid "Enter agent name*"
 msgstr "Introdueix el nom de l'agent*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/cs-CZ.po

@@ -455,6 +455,11 @@ msgstr "Přidat předání"
 msgid "Add inputs to your form"
 msgstr "Přidejte vstupy do svého formuláře"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "Zadejte hodnotu pro uložení do databáze"
 msgid "Enter agent name*"
 msgstr "Zadejte jméno agenta*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/da-DK.po

@@ -455,6 +455,11 @@ msgstr "Tilføj Overlevering"
 msgid "Add inputs to your form"
 msgstr "Tilføj inputfelter til din formular"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "Indtast en værdi for at gemme i databasen"
 msgid "Enter agent name*"
 msgstr "Indtast agentnavn*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/de-DE.po

@@ -455,6 +455,11 @@ msgstr "Handoff hinzufügen"
 msgid "Add inputs to your form"
 msgstr "Fügen Sie Eingaben zu Ihrem Formular hinzu"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "Geben Sie einen Wert ein, der in der Datenbank gespeichert werden soll"
 msgid "Enter agent name*"
 msgstr "Agentennamen eingeben*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/el-GR.po

@@ -455,6 +455,11 @@ msgstr "Προσθήκη Χειρισμού"
 msgid "Add inputs to your form"
 msgstr "Προσθέστε εισόδους στη φόρμα σας"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "Πληκτρολογήστε μια τιμή για να αποθηκε
 msgid "Enter agent name*"
 msgstr "Εισάγετε το όνομα του πράκτορα*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/en.po

@@ -450,6 +450,11 @@ msgstr "Add Handoff"
 msgid "Add inputs to your form"
 msgstr "Add inputs to your form"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr "Add item"
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3053,6 +3058,11 @@ msgstr "Enter a value to store in database"
 msgid "Enter agent name*"
 msgstr "Enter agent name*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr "Enter an item"
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/es-ES.po

@@ -455,6 +455,11 @@ msgstr "Añadir transferencia"
 msgid "Add inputs to your form"
 msgstr "Agrega entradas a tu formulario"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "Ingrese un valor para almacenar en la base de datos"
 msgid "Enter agent name*"
 msgstr "Ingrese el nombre del agente*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/fi-FI.po

@@ -455,6 +455,11 @@ msgstr "Lisää välitys"
 msgid "Add inputs to your form"
 msgstr "Lisää kenttiä lomakkeeseen"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "Anna arvo tallennettavaksi tietokantaan"
 msgid "Enter agent name*"
 msgstr "Syötä agentin nimi*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/fr-FR.po

@@ -455,6 +455,11 @@ msgstr "Ajouter le transfert"
 msgid "Add inputs to your form"
 msgstr "Ajoutez des entrées à votre formulaire"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "Entrez une valeur à stocker dans la base de données"
 msgid "Enter agent name*"
 msgstr "Entrer le nom de l'agent*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/he-IL.po

@@ -455,6 +455,11 @@ msgstr "הוסף העברת סוכן"
 msgid "Add inputs to your form"
 msgstr "הוסף קלטים לטופס שלך"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "הזן ערך לאחסון בבסיס הנתונים"
 msgid "Enter agent name*"
 msgstr "הזן שם סוכן*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/hu-HU.po

@@ -455,6 +455,11 @@ msgstr "Átadás hozzáadása"
 msgid "Add inputs to your form"
 msgstr "Adj hozzá bemeneteket az űrlaphoz"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "Adjon meg egy értéket az adatbázisban való tároláshoz"
 msgid "Enter agent name*"
 msgstr "Adja meg az ügynök nevét*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/it-IT.po

@@ -455,6 +455,11 @@ msgstr "Aggiungi Trasferimento"
 msgid "Add inputs to your form"
 msgstr "Aggiungi ingressi al tuo modulo"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "Inserisci un valore da memorizzare nel database"
 msgid "Enter agent name*"
 msgstr "Inserisci il nome dell'agente*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/ja-JP.po

@@ -455,6 +455,11 @@ msgstr "ハンドオフを追加"
 msgid "Add inputs to your form"
 msgstr "フォームに入力を追加する"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "データベースに保存する値を入力"
 msgid "Enter agent name*"
 msgstr "エージェント名を入力*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/ko-KR.po

@@ -455,6 +455,11 @@ msgstr "핸드오프 추가"
 msgid "Add inputs to your form"
 msgstr "폼에 입력란 추가"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "데이터베이스에 저장할 값을 입력하세요."
 msgid "Enter agent name*"
 msgstr "에이전트 이름 입력*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/nl-NL.po

@@ -455,6 +455,11 @@ msgstr "Handoff toevoegen"
 msgid "Add inputs to your form"
 msgstr "Voeg invoervelden toe aan uw formulier"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "Voer een waarde in die in de database moet worden opgeslagen"
 msgid "Enter agent name*"
 msgstr "Voer agentnaam in*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/no-NO.po

@@ -455,6 +455,11 @@ msgstr "Legg til overlevering"
 msgid "Add inputs to your form"
 msgstr "Legg til innganger i skjemaet ditt"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "Skriv inn en verdi for å lagre i databasen"
 msgid "Enter agent name*"
 msgstr "Skriv inn agentens navn*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/pl-PL.po

@@ -455,6 +455,11 @@ msgstr "Dodaj przekazanie"
 msgid "Add inputs to your form"
 msgstr "Dodaj pola do formularza"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "Wprowadź wartość do przechowywania w bazie danych"
 msgid "Enter agent name*"
 msgstr "Wprowadź nazwę agenta*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/pseudo-en.po

@@ -450,6 +450,11 @@ msgstr ""
 msgid "Add inputs to your form"
 msgstr ""
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3053,6 +3058,11 @@ msgstr ""
 msgid "Enter agent name*"
 msgstr ""
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/pt-BR.po

@@ -455,6 +455,11 @@ msgstr "Adicionar Transferência"
 msgid "Add inputs to your form"
 msgstr "Adicione entradas ao seu formulário"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "Insira um valor para armazenar no banco de dados"
 msgid "Enter agent name*"
 msgstr "Digite o nome do agente*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/pt-PT.po

@@ -455,6 +455,11 @@ msgstr "Adicionar Transferência"
 msgid "Add inputs to your form"
 msgstr "Adicione entradas ao seu formulário"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "Insira um valor para armazenar no banco de dados"
 msgid "Enter agent name*"
 msgstr "Insira o nome do agente*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/ro-RO.po

@@ -455,6 +455,11 @@ msgstr "Adaugă Transfer"
 msgid "Add inputs to your form"
 msgstr "Adăugați intrări la formularul dumneavoastră"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "Introduceți o valoare pentru a o stoca în baza de date"
 msgid "Enter agent name*"
 msgstr "Introdu numele agentului*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/sr-Cyrl.po

@@ -455,6 +455,11 @@ msgstr "Додај Пренос"
 msgid "Add inputs to your form"
 msgstr "Додај уносе у ваш образац"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "Унесите вредност за чување у базу подат
 msgid "Enter agent name*"
 msgstr "Унесите име агента*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/sv-SE.po

@@ -455,6 +455,11 @@ msgstr "Lägg till överlämning"
 msgid "Add inputs to your form"
 msgstr "Lägg till inmatningar på ditt formulär"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "Ange ett värde att lagra i databasen"
 msgid "Enter agent name*"
 msgstr "Ange agentens namn*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/tr-TR.po

@@ -455,6 +455,11 @@ msgstr "Devir Ekle"
 msgid "Add inputs to your form"
 msgstr "Formunuza girişleri ekleyin"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "Veritabanında saklanacak bir değer girin"
 msgid "Enter agent name*"
 msgstr "Temsilci adını gir*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/uk-UA.po

@@ -455,6 +455,11 @@ msgstr "Додати передачу"
 msgid "Add inputs to your form"
 msgstr "Додайте введення у вашу форму"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "Введіть значення, яке потрібно зберегт
 msgid "Enter agent name*"
 msgstr "Введіть ім'я агента*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/vi-VN.po

@@ -455,6 +455,11 @@ msgstr "Thêm chuyển giao"
 msgid "Add inputs to your form"
 msgstr "Thêm đầu vào vào biểu mẫu của bạn"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "Nhập một giá trị để lưu trữ vào cơ sở dữ liệu"
 msgid "Enter agent name*"
 msgstr "Nhập tên tác nhân*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/zh-CN.po

@@ -455,6 +455,11 @@ msgstr "添加交接"
 msgid "Add inputs to your form"
 msgstr "添加输入到您的表单"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "输入一个值存储在数据库中"
 msgid "Enter agent name*"
 msgstr "输入代理名称*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/locales/zh-TW.po

@@ -455,6 +455,11 @@ msgstr "添加移交"
 msgid "Add inputs to your form"
 msgstr "增加輸入到您的表單"
 
+#. js-lingui-id: NQ8llq
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Add item"
+msgstr ""
+
 #. js-lingui-id: Hkobke
 #: src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
 msgid "Add new"
@@ -3058,6 +3063,11 @@ msgstr "輸入要存儲在資料庫中的值"
 msgid "Enter agent name*"
 msgstr "輸入代理名稱*"
 
+#. js-lingui-id: wgNkIh
+#: src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+msgid "Enter an item"
+msgstr ""
+
 #. js-lingui-id: kOybqX
 #: src/modules/workflow/workflow-steps/workflow-actions/iterator-action/WorkflowEditActionIterator.tsx
 msgid "Enter array of items or variable expression"

packages/twenty-front/src/modules/object-record/record-field/ui/components/FormFieldInput.tsx

@@ -1,4 +1,5 @@
 import { FormAddressFieldInput } from '@/object-record/record-field/ui/form-types/components/FormAddressFieldInput';
+import { FormArrayFieldInput } from '@/object-record/record-field/ui/form-types/components/FormArrayFieldInput';
 import { FormBooleanFieldInput } from '@/object-record/record-field/ui/form-types/components/FormBooleanFieldInput';
 import { FormCurrencyFieldInput } from '@/object-record/record-field/ui/form-types/components/FormCurrencyFieldInput';
 import { FormDateFieldInput } from '@/object-record/record-field/ui/form-types/components/FormDateFieldInput';
@@ -19,6 +20,7 @@ import { type VariablePickerComponent } from '@/object-record/record-field/ui/fo
 import { type FieldDefinition } from '@/object-record/record-field/ui/types/FieldDefinition';
 import {
   type FieldAddressValue,
+  type FieldArrayValue,
   type FieldEmailsValue,
   type FieldFullNameValue,
   type FieldLinksValue,
@@ -31,6 +33,7 @@ import {
   type FormFieldCurrencyValue,
 } from '@/object-record/record-field/ui/types/FieldMetadata';
 import { isFieldAddress } from '@/object-record/record-field/ui/types/guards/isFieldAddress';
+import { isFieldArray } from '@/object-record/record-field/ui/types/guards/isFieldArray';
 import { isFieldBoolean } from '@/object-record/record-field/ui/types/guards/isFieldBoolean';
 import { isFieldCurrency } from '@/object-record/record-field/ui/types/guards/isFieldCurrency';
 import { isFieldDate } from '@/object-record/record-field/ui/types/guards/isFieldDate';
@@ -221,5 +224,14 @@ export const FormFieldInput = ({
       VariablePicker={VariablePicker}
       readonly={readonly}
     />
+  ) : isFieldArray(field) ? (
+    <FormArrayFieldInput
+      label={field.label}
+      defaultValue={defaultValue as FieldArrayValue | string | undefined}
+      onChange={onChange}
+      VariablePicker={VariablePicker}
+      readonly={readonly}
+      placeholder={placeholder}
+    />
   ) : null;
 };

packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx

@@ -0,0 +1,393 @@
+import { FormFieldInputContainer } from '@/object-record/record-field/ui/form-types/components/FormFieldInputContainer';
+import { FormFieldInputInnerContainer } from '@/object-record/record-field/ui/form-types/components/FormFieldInputInnerContainer';
+import { FormFieldInputRowContainer } from '@/object-record/record-field/ui/form-types/components/FormFieldInputRowContainer';
+import { FormFieldPlaceholder } from '@/object-record/record-field/ui/form-types/components/FormFieldPlaceholder';
+import { VariableChipStandalone } from '@/object-record/record-field/ui/form-types/components/VariableChipStandalone';
+import { type VariablePickerComponent } from '@/object-record/record-field/ui/form-types/types/VariablePickerComponent';
+import { ArrayFieldMenuItem } from '@/object-record/record-field/ui/meta-types/input/components/ArrayFieldMenuItem';
+import { MultiItemBaseInput } from '@/object-record/record-field/ui/meta-types/input/components/MultiItemBaseInput';
+import { type FieldArrayValue } from '@/object-record/record-field/ui/types/FieldMetadata';
+import { ArrayDisplay } from '@/ui/field/display/components/ArrayDisplay';
+import { TextInput } from '@/ui/field/input/components/TextInput';
+import { InputLabel } from '@/ui/input/components/InputLabel';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
+import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
+import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
+import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
+import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
+import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
+import { useId, useRef, useState } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+import { IconPlus } from 'twenty-ui/display';
+import { MenuItem } from 'twenty-ui/navigation';
+import { toSpliced } from '~/utils/array/toSpliced';
+
+type FormArrayFieldInputProps = {
+  label?: string;
+  defaultValue: FieldArrayValue | string | undefined;
+  onChange: (value: FieldArrayValue | string) => void;
+  VariablePicker?: VariablePickerComponent;
+  readonly?: boolean;
+  placeholder?: string;
+  testId?: string;
+};
+
+const StyledDisplayModeReadonlyContainer = styled.div`
+  align-items: center;
+  background: transparent;
+  border: none;
+  display: flex;
+  font-family: inherit;
+  padding-inline: ${({ theme }) => theme.spacing(2)};
+  width: 100%;
+`;
+
+const StyledDisplayModeContainer = styled(StyledDisplayModeReadonlyContainer)`
+  height: 30px;
+  cursor: pointer;
+  box-sizing: border-box;
+
+  &:hover,
+  &[data-open='true'] {
+    background-color: ${({ theme }) => theme.background.transparent.lighter};
+  }
+`;
+
+const StyledInput = styled(TextInput)`
+  padding: ${({ theme }) => `${theme.spacing(1)} ${theme.spacing(2)}`};
+`;
+
+const StyledPlaceholder = styled(FormFieldPlaceholder)`
+  width: 100%;
+`;
+
+const parseSpacingValueAsNumber = (value: string) => {
+  return Number(value.replace('px', ''));
+};
+
+export const FormArrayFieldInput = ({
+  label,
+  defaultValue,
+  onChange,
+  VariablePicker,
+  readonly,
+  placeholder,
+  testId,
+}: FormArrayFieldInputProps) => {
+  const { t } = useLingui();
+  const theme = useTheme();
+
+  const instanceId = useId();
+
+  const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
+  const { removeFocusItemFromFocusStackById } =
+    useRemoveFocusItemFromFocusStackById();
+  const { closeDropdown } = useCloseDropdown();
+  const { openDropdown } = useOpenDropdown();
+
+  const [draftValue, setDraftValue] = useState<
+    | {
+        type: 'static';
+        value: FieldArrayValue;
+      }
+    | {
+        type: 'variable';
+        value: string;
+      }
+  >(
+    isStandaloneVariableString(defaultValue)
+      ? {
+          type: 'variable',
+          value: defaultValue,
+        }
+      : {
+          type: 'static',
+          value: isDefined(defaultValue) ? defaultValue : [],
+        },
+  );
+
+  const [newItemDraftValue, setNewItemDraftValue] = useState('');
+  const [inputValue, setInputValue] = useState('');
+  const [isInputDisplayed, setIsInputDisplayed] = useState(false);
+  const [itemToEditIndex, setItemToEditIndex] = useState(-1);
+  const isAddingNewItem = itemToEditIndex === -1;
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const dropdownId = `dropdown-${instanceId}`;
+  const isDropdownOpen = useRecoilComponentValue(
+    isDropdownOpenComponentState,
+    dropdownId,
+  );
+
+  const preventContainerFocusStackUpdate =
+    draftValue.type === 'static' && draftValue.value.length >= 1;
+
+  const formFieldInputInstanceId = `form-array-field-container-${instanceId}`;
+  const newItemInputInstanceId = `array-field-input-new-item-${instanceId}`;
+
+  const handleFirstItemInputChange = (value: string) => {
+    setNewItemDraftValue(value);
+  };
+
+  const handleFirstItemInputEnter = () => {
+    setDraftValue({
+      type: 'static',
+      value: [...draftValue.value, newItemDraftValue],
+    });
+
+    onChange([...draftValue.value, newItemDraftValue]);
+
+    setNewItemDraftValue('');
+
+    openDropdown({
+      dropdownComponentInstanceIdFromProps: dropdownId,
+    });
+
+    removeFocusItemFromFocusStackById({
+      focusId: formFieldInputInstanceId,
+    });
+  };
+
+  const handleEditItem = (index: number) => {
+    setInputValue(draftValue.value[index]);
+    setItemToEditIndex(index);
+    setIsInputDisplayed(true);
+  };
+
+  const handleDeleteItem = (index: number) => {
+    if (draftValue.type !== 'static') {
+      throw new Error('Cannot delete item when value is a variable.');
+    }
+
+    const updatedItems = toSpliced(draftValue.value, index, 1);
+
+    setDraftValue({
+      type: 'static',
+      value: updatedItems,
+    });
+    onChange(updatedItems);
+
+    const isDropdownGoingToBeHiddenNext = updatedItems.length === 0;
+    if (isDropdownGoingToBeHiddenNext) {
+      closeDropdown(dropdownId);
+    }
+  };
+
+  const handleNewItemInputFocus = () => {
+    pushFocusItemToFocusStack({
+      focusId: newItemInputInstanceId,
+      component: {
+        type: FocusComponentType.FORM_FIELD_INPUT,
+        instanceId: newItemInputInstanceId,
+      },
+      globalHotkeysConfig: {
+        enableGlobalHotkeysConflictingWithKeyboard: false,
+      },
+    });
+  };
+
+  const handleNewItemInputBlur = () => {
+    removeFocusItemFromFocusStackById({
+      focusId: newItemInputInstanceId,
+    });
+  };
+
+  const handleNewItemInputEscape = () => {
+    closeDropdown(dropdownId);
+
+    setIsInputDisplayed(false);
+    setInputValue('');
+
+    removeFocusItemFromFocusStackById({
+      focusId: newItemInputInstanceId,
+    });
+  };
+
+  const handleNewItemInputChange = (value: string) => {
+    setInputValue(value);
+  };
+
+  const handleNewItemInputSubmit = () => {
+    if (draftValue.type !== 'static') {
+      throw new Error('Cannot submit input when value is a variable.');
+    }
+
+    const sanitizedInput = inputValue.trim();
+
+    if (sanitizedInput === '' && isAddingNewItem) {
+      return;
+    }
+
+    if (sanitizedInput === '' && !isAddingNewItem) {
+      handleDeleteItem(itemToEditIndex);
+      return;
+    }
+
+    const items = draftValue.value;
+
+    if (!isAddingNewItem && sanitizedInput === items[itemToEditIndex]) {
+      setIsInputDisplayed(false);
+      setInputValue('');
+      return;
+    }
+
+    const updatedItems = isAddingNewItem
+      ? [...items, sanitizedInput]
+      : toSpliced(items, itemToEditIndex, 1, sanitizedInput);
+
+    setDraftValue({
+      type: 'static',
+      value: updatedItems,
+    });
+    onChange(updatedItems);
+
+    setIsInputDisplayed(false);
+    setInputValue('');
+
+    removeFocusItemFromFocusStackById({
+      focusId: newItemInputInstanceId,
+    });
+  };
+
+  const handleAddItemButtonClick = () => {
+    setItemToEditIndex(-1);
+    setIsInputDisplayed(true);
+  };
+
+  const handleVariableTagInsert = (variableName: string) => {
+    setDraftValue({
+      type: 'variable',
+      value: variableName,
+    });
+
+    onChange(variableName);
+  };
+
+  const handleUnlinkVariable = () => {
+    setDraftValue({
+      type: 'static',
+      value: [],
+    });
+
+    setNewItemDraftValue('');
+
+    onChange([]);
+  };
+
+  return (
+    <FormFieldInputContainer data-testid={testId}>
+      {label ? <InputLabel>{label}</InputLabel> : null}
+
+      <FormFieldInputRowContainer>
+        <FormFieldInputInnerContainer
+          formFieldInputInstanceId={formFieldInputInstanceId}
+          preventFocusStackUpdate={preventContainerFocusStackUpdate}
+          hasRightElement={isDefined(VariablePicker) && !readonly}
+        >
+          {draftValue.type === 'static' ? (
+            readonly ? (
+              <StyledDisplayModeReadonlyContainer>
+                {draftValue.value.length > 0 ? (
+                  <ArrayDisplay value={draftValue.value} />
+                ) : (
+                  <StyledPlaceholder />
+                )}
+              </StyledDisplayModeReadonlyContainer>
+            ) : draftValue.value.length === 0 ? (
+              <StyledInput
+                instanceId={formFieldInputInstanceId}
+                placeholder={t`Enter an item`}
+                value={newItemDraftValue}
+                copyButton={false}
+                onChange={handleFirstItemInputChange}
+                onEnter={handleFirstItemInputEnter}
+                shouldTrim={false}
+              />
+            ) : (
+              <Dropdown
+                dropdownId={dropdownId}
+                dropdownPlacement="bottom-start"
+                dropdownOffset={{
+                  y: parseSpacingValueAsNumber(theme.spacing(1)),
+                }}
+                clickableComponent={
+                  <StyledDisplayModeContainer data-open={isDropdownOpen}>
+                    <ArrayDisplay value={draftValue.value} />
+                  </StyledDisplayModeContainer>
+                }
+                clickableComponentWidth="100%"
+                dropdownComponents={
+                  <DropdownContent ref={containerRef}>
+                    <DropdownMenuItemsContainer hasMaxHeight>
+                      {draftValue.type === 'static' &&
+                        draftValue.value.map((value, index) => (
+                          <ArrayFieldMenuItem
+                            key={index}
+                            dropdownId={`array-field-input-${instanceId}-${index}`}
+                            value={value}
+                            onEdit={() => {
+                              handleEditItem(index);
+                            }}
+                            onDelete={() => {
+                              handleDeleteItem(index);
+                            }}
+                          />
+                        ))}
+                    </DropdownMenuItemsContainer>
+
+                    <DropdownMenuSeparator />
+
+                    {isInputDisplayed ? (
+                      <MultiItemBaseInput
+                        instanceId={newItemInputInstanceId}
+                        autoFocus
+                        placeholder={placeholder}
+                        value={inputValue}
+                        onFocus={handleNewItemInputFocus}
+                        onBlur={handleNewItemInputBlur}
+                        onEscape={handleNewItemInputEscape}
+                        onChange={handleNewItemInputChange}
+                        onEnter={handleNewItemInputSubmit}
+                        hasItem
+                      />
+                    ) : (
+                      <DropdownMenuItemsContainer>
+                        <MenuItem
+                          onClick={handleAddItemButtonClick}
+                          LeftIcon={IconPlus}
+                          text={t`Add item`}
+                        />
+                      </DropdownMenuItemsContainer>
+                    )}
+                  </DropdownContent>
+                }
+              />
+            )
+          ) : (
+            <VariableChipStandalone
+              rawVariableName={draftValue.value}
+              onRemove={readonly ? undefined : handleUnlinkVariable}
+            />
+          )}
+        </FormFieldInputInnerContainer>
+
+        {VariablePicker && !readonly && (
+          <VariablePicker
+            instanceId={instanceId}
+            onVariableSelect={handleVariableTagInsert}
+          />
+        )}
+      </FormFieldInputRowContainer>
+    </FormFieldInputContainer>
+  );
+};

packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/__stories__/FormArrayFieldInput.stories.tsx

@@ -0,0 +1,346 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
+import { isDefined } from 'twenty-shared/utils';
+import { getCanvasElementForDropdownTesting } from 'twenty-ui/testing';
+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
+import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorator';
+import { MOCKED_STEP_ID } from '~/testing/mock-data/workflow';
+import { FormArrayFieldInput } from '../FormArrayFieldInput';
+
+const meta: Meta<typeof FormArrayFieldInput> = {
+  title: 'UI/Data/Field/Form/Input/FormArrayFieldInput',
+  component: FormArrayFieldInput,
+  args: {},
+  argTypes: {},
+  decorators: [WorkflowStepDecorator, I18nFrontDecorator],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FormArrayFieldInput>;
+
+export const AddTwoItems: Story = {
+  args: {
+    label: 'Items',
+    defaultValue: undefined,
+    onChange: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const emptyInput = await canvas.findByPlaceholderText('Enter an item');
+
+    await userEvent.type(emptyInput, 'First item{enter}');
+
+    await waitFor(() => {
+      expect(args.onChange).toHaveBeenCalledWith(['First item']);
+    });
+
+    const firstItemChip = await canvas.findByText('First item');
+
+    expect(firstItemChip).toBeVisible();
+
+    await waitFor(() => {
+      expect(emptyInput).not.toBeVisible();
+    });
+
+    const addItemButton = await within(
+      getCanvasElementForDropdownTesting(),
+    ).findByText('Add item');
+
+    await userEvent.click(addItemButton);
+
+    await waitFor(() => {
+      expect(addItemButton).not.toBeVisible();
+    });
+
+    const newItemInput = await within(
+      getCanvasElementForDropdownTesting(),
+    ).findByRole('textbox');
+
+    await userEvent.type(newItemInput, 'Second item{enter}');
+
+    await waitFor(() => {
+      expect(args.onChange).toHaveBeenCalledWith(['First item', 'Second item']);
+    });
+
+    await waitFor(() => {
+      expect(newItemInput).not.toBeVisible();
+    });
+
+    const secondItemMenuItem = await waitFor(() => {
+      const allSecondItems = within(
+        getCanvasElementForDropdownTesting(),
+      ).getAllByText('Second item');
+
+      expect(allSecondItems).toHaveLength(2);
+
+      return allSecondItems[1];
+    });
+
+    expect(secondItemMenuItem).toBeVisible();
+  },
+};
+
+export const EditExistingItem: Story = {
+  args: {
+    label: 'Items',
+    defaultValue: ['First item', 'Second item'],
+    onChange: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const firstItemChip = await canvas.findByText('First item');
+
+    await userEvent.click(firstItemChip);
+
+    const openSecondItemMenuButton = await waitFor(() => {
+      const button = getCanvasElementForDropdownTesting().querySelector(
+        '[aria-controls$="-1-options"] > button',
+      );
+
+      if (!isDefined(button)) {
+        throw new Error('Button not found');
+      }
+
+      return button;
+    });
+
+    await userEvent.click(openSecondItemMenuButton);
+
+    const editSecondItemButton = await within(
+      getCanvasElementForDropdownTesting(),
+    ).findByText('Edit');
+
+    await userEvent.click(editSecondItemButton);
+
+    const editSecondItemInput = await within(
+      getCanvasElementForDropdownTesting(),
+    ).findByRole('textbox');
+
+    expect(editSecondItemInput).toHaveValue('Second item');
+
+    await userEvent.clear(editSecondItemInput);
+    await userEvent.type(editSecondItemInput, 'Updated second item{enter}');
+
+    await waitFor(() => {
+      expect(args.onChange).toHaveBeenCalledWith([
+        'First item',
+        'Updated second item',
+      ]);
+    });
+
+    const updatedSecondItemChip = await canvas.findByText(
+      'Updated second item',
+    );
+
+    expect(updatedSecondItemChip).toBeVisible();
+  },
+};
+
+export const DeleteExistingItem: Story = {
+  args: {
+    label: 'Items',
+    defaultValue: ['First item', 'Second item'],
+    onChange: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const firstItemChip = await canvas.findByText('First item');
+
+    await userEvent.click(firstItemChip);
+
+    const openSecondItemMenuButton = await waitFor(() => {
+      const button = getCanvasElementForDropdownTesting().querySelector(
+        '[aria-controls$="-1-options"] > button',
+      );
+
+      if (!isDefined(button)) {
+        throw new Error('Button not found');
+      }
+
+      return button;
+    });
+
+    await userEvent.click(openSecondItemMenuButton);
+
+    const deleteSecondItemButton = await within(
+      getCanvasElementForDropdownTesting(),
+    ).findByText('Delete');
+
+    await userEvent.click(deleteSecondItemButton);
+
+    await waitFor(() => {
+      expect(args.onChange).toHaveBeenCalledWith(['First item']);
+    });
+
+    expect(canvas.queryByText('Second item')).not.toBeInTheDocument();
+  },
+};
+
+export const SetVariable: Story = {
+  args: {
+    label: 'Items',
+    defaultValue: undefined,
+    onChange: fn(),
+    VariablePicker: ({ onVariableSelect }) => {
+      return (
+        <button
+          onClick={() => {
+            onVariableSelect(`{{${MOCKED_STEP_ID}.name}}`);
+          }}
+        >
+          Add variable
+        </button>
+      );
+    },
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const addVariableButton = await canvas.findByRole('button', {
+      name: 'Add variable',
+    });
+
+    await userEvent.click(addVariableButton);
+
+    await waitFor(() => {
+      expect(args.onChange).toHaveBeenCalledWith(`{{${MOCKED_STEP_ID}.name}}`);
+    });
+
+    const variable = await canvas.findByText('Name');
+
+    expect(variable).toBeVisible();
+  },
+};
+
+export const ReplaceItemsWithVariable: Story = {
+  args: {
+    label: 'Items',
+    defaultValue: ['First item', 'Second item'],
+    onChange: fn(),
+    VariablePicker: ({ onVariableSelect }) => {
+      return (
+        <button
+          onClick={() => {
+            onVariableSelect(`{{${MOCKED_STEP_ID}.name}}`);
+          }}
+        >
+          Add variable
+        </button>
+      );
+    },
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const addVariableButton = await canvas.findByRole('button', {
+      name: 'Add variable',
+    });
+
+    await userEvent.click(addVariableButton);
+
+    await waitFor(() => {
+      expect(args.onChange).toHaveBeenCalledWith(`{{${MOCKED_STEP_ID}.name}}`);
+    });
+
+    const variable = await canvas.findByText('Name');
+
+    expect(variable).toBeVisible();
+  },
+};
+
+export const ReplaceVariableWithItems: Story = {
+  args: {
+    label: 'Items',
+    defaultValue: `{{${MOCKED_STEP_ID}.createdAt}}`,
+    onChange: fn(),
+    VariablePicker: ({ onVariableSelect }) => {
+      return (
+        <button
+          onClick={() => {
+            onVariableSelect(`{{${MOCKED_STEP_ID}.name}}`);
+          }}
+        >
+          Add variable
+        </button>
+      );
+    },
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const deleteVariableButton = await canvas.findByRole('button', {
+      name: 'Remove variable',
+    });
+
+    await userEvent.click(deleteVariableButton);
+
+    await waitFor(() => {
+      expect(args.onChange).toHaveBeenCalledWith([]);
+    });
+
+    const emptyInput = await canvas.findByPlaceholderText('Enter an item');
+
+    await userEvent.type(emptyInput, 'First item{enter}');
+
+    await waitFor(() => {
+      expect(args.onChange).toHaveBeenCalledWith(['First item']);
+    });
+
+    const firstItemChip = await canvas.findByText('First item');
+
+    expect(firstItemChip).toBeVisible();
+  },
+};
+
+export const DisabledEmptyField: Story = {
+  args: {
+    defaultValue: undefined,
+    onChange: fn(),
+    readonly: true,
+  },
+  play: async ({ canvasElement }) => {
+    await waitFor(() => {
+      expect(canvasElement.textContent).toBe('');
+    });
+  },
+};
+
+export const DisabledWithItems: Story = {
+  args: {
+    label: 'Items',
+    defaultValue: ['First item', 'Second item'],
+    onChange: fn(),
+    readonly: true,
+  },
+  play: async ({ canvasElement, args }) => {
+    for (const item of args.defaultValue as string[]) {
+      const itemChip = await within(canvasElement).findByText(item);
+
+      expect(itemChip).toBeVisible();
+    }
+  },
+};
+
+export const DisabledWithVariable: Story = {
+  args: {
+    label: 'Items',
+    defaultValue: `{{${MOCKED_STEP_ID}.createdAt}}`,
+    onChange: fn(),
+    readonly: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const variableChip = await canvas.findByText('Creation date');
+    expect(variableChip).toBeVisible();
+
+    await userEvent.click(variableChip);
+
+    const searchInputInModal = canvas.queryByPlaceholderText('Search');
+    expect(searchInputInModal).not.toBeInTheDocument();
+  },
+};

packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/MultiItemBaseInput.tsx

@@ -71,7 +71,10 @@ const StyledErrorDiv = styled.div`
 
 type HTMLInputProps = InputHTMLAttributes<HTMLInputElement>;
 
-export type MultiItemBaseInputProps = Omit<HTMLInputProps, 'onChange'> & {
+export type MultiItemBaseInputProps = Pick<
+  HTMLInputProps,
+  'autoFocus' | 'className' | 'value' | 'placeholder' | 'onFocus' | 'onBlur'
+> & {
   onClickOutside?: () => void;
   onEnter?: () => void;
   onEscape?: () => void;
@@ -108,6 +111,8 @@ export const MultiItemBaseInput = forwardRef<
       onEscape = () => {},
       onShiftTab,
       onTab,
+      onFocus,
+      onBlur,
       rightComponent,
       renderInput,
       error = '',
@@ -152,6 +157,8 @@ export const MultiItemBaseInput = forwardRef<
               ref={combinedRef}
               withRightComponent={!!rightComponent}
               hasItem={hasItem}
+              onFocus={onFocus}
+              onBlur={onBlur}
             />
           )}
           {!!rightComponent && (