diff --git a/packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx
index 67cf91492042..8a11b321550e 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx
@@ -1,5 +1,6 @@
import { FormAddressFieldInput } from '@/object-record/record-field/form-types/components/FormAddressFieldInput';
import { FormBooleanFieldInput } from '@/object-record/record-field/form-types/components/FormBooleanFieldInput';
+import { FormEmailsFieldInput } from '@/object-record/record-field/form-types/components/FormEmailsFieldInput';
import { FormFullNameFieldInput } from '@/object-record/record-field/form-types/components/FormFullNameFieldInput';
import { FormLinksFieldInput } from '@/object-record/record-field/form-types/components/FormLinksFieldInput';
import { FormNumberFieldInput } from '@/object-record/record-field/form-types/components/FormNumberFieldInput';
@@ -9,12 +10,14 @@ import { VariablePickerComponent } from '@/object-record/record-field/form-types
import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
import {
FieldAddressValue,
+ FieldEmailsValue,
FieldFullNameValue,
FieldLinksValue,
FieldMetadata,
} from '@/object-record/record-field/types/FieldMetadata';
import { isFieldAddress } from '@/object-record/record-field/types/guards/isFieldAddress';
import { isFieldBoolean } from '@/object-record/record-field/types/guards/isFieldBoolean';
+import { isFieldEmails } from '@/object-record/record-field/types/guards/isFieldEmails';
import { isFieldFullName } from '@/object-record/record-field/types/guards/isFieldFullName';
import { isFieldLinks } from '@/object-record/record-field/types/guards/isFieldLinks';
import { isFieldNumber } from '@/object-record/record-field/types/guards/isFieldNumber';
@@ -88,5 +91,12 @@ export const FormFieldInput = ({
onPersist={onPersist}
VariablePicker={VariablePicker}
/>
+ ) : isFieldEmails(field) ? (
+
) : null;
};
diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormEmailsFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormEmailsFieldInput.tsx
new file mode 100644
index 000000000000..479792c23c4b
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormEmailsFieldInput.tsx
@@ -0,0 +1,45 @@
+import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer';
+import { FormNestedFieldInputContainer } from '@/object-record/record-field/form-types/components/FormNestedFieldInputContainer';
+import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
+import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
+import { FieldEmailsValue } from '@/object-record/record-field/types/FieldMetadata';
+import { InputLabel } from '@/ui/input/components/InputLabel';
+
+type FormEmailsFieldInputProps = {
+ label?: string;
+ defaultValue?: FieldEmailsValue;
+ onPersist: (value: FieldEmailsValue) => void;
+ VariablePicker?: VariablePickerComponent;
+ readonly?: boolean;
+};
+
+export const FormEmailsFieldInput = ({
+ label,
+ defaultValue,
+ onPersist,
+ readonly,
+ VariablePicker,
+}: FormEmailsFieldInputProps) => {
+ const handleChange = (email: string) => {
+ onPersist({
+ primaryEmail: email,
+ additionalEmails: [],
+ });
+ };
+
+ return (
+
+ {label ? {label} : null}
+
+
+
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormEmailsFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormEmailsFieldInput.stories.tsx
new file mode 100644
index 000000000000..dbf2ef332731
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormEmailsFieldInput.stories.tsx
@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+import { FormEmailsFieldInput } from '../FormEmailsFieldInput';
+
+const meta: Meta = {
+ title: 'UI/Data/Field/Form/Input/FormEmailsFieldInput',
+ component: FormEmailsFieldInput,
+ args: {},
+ argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ label: 'Emails',
+ defaultValue: {
+ primaryEmail: 'tim@twenty.com',
+ additionalEmails: [],
+ },
+ },
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ await canvas.findByText('Emails');
+ await canvas.findByText('Primary Email');
+ await canvas.findByText('tim@twenty.com');
+ },
+};