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 9f0480927..75fd09a47 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
@@ -92,6 +92,7 @@ export const FormFieldInput = ({
options={field.metadata.options}
clearLabel={field.label}
readonly={readonly}
+ placeholder={field.label}
/>
) : isFieldFullName(field) ? (
) : isFieldRawJson(field) ? (
);
diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCurrencyFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCurrencyFieldInput.tsx
index 06cc9a2b5..c23672611 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCurrencyFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCurrencyFieldInput.tsx
@@ -62,6 +62,7 @@ export const FormCurrencyFieldInput = ({
clearLabel={'Currency Code'}
VariablePicker={VariablePicker}
readonly={readonly}
+ placeholder="Select a currency"
preventDisplayPadding
/>
void;
VariablePicker?: VariablePickerComponent;
readonly?: boolean;
+ placeholder?: string;
};
const StyledDisplayModeReadonlyContainer = styled.div`
@@ -52,6 +54,12 @@ const StyledSelectInputContainer = styled.div`
top: ${({ theme }) => theme.spacing(8)};
`;
+const StyledPlaceholder = styled.div`
+ color: ${({ theme }) => theme.font.color.light};
+ font-weight: ${({ theme }) => theme.font.weight.medium};
+ width: 100%;
+`;
+
export const FormMultiSelectFieldInput = ({
label,
defaultValue,
@@ -59,8 +67,10 @@ export const FormMultiSelectFieldInput = ({
onPersist,
VariablePicker,
readonly,
+ placeholder,
}: FormMultiSelectFieldInputProps) => {
const inputId = useId();
+ const theme = useTheme();
const hotkeyScope = MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID;
@@ -163,6 +173,8 @@ export const FormMultiSelectFieldInput = ({
)
: undefined;
+ const placeholderText = placeholder ?? label;
+
return (
{label ? {label} : null}
@@ -174,12 +186,18 @@ export const FormMultiSelectFieldInput = ({
{draftValue.type === 'static' ? (
readonly ? (
- {isDefined(selectedOptions) && (
+ {isDefined(selectedOptions) && selectedOptions.length > 0 ? (
+ ) : (
+
)}
+
) : (
Edit
- {isDefined(selectedOptions) && (
+ {isDefined(selectedOptions) && selectedOptions.length > 0 ? (
+ ) : (
+ {placeholderText}
)}
+
)
) : (
diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx
index 37b42aad4..c302478a8 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx
@@ -29,6 +29,7 @@ type FormSelectFieldInputProps = {
clearLabel?: string;
readonly?: boolean;
preventDisplayPadding?: boolean;
+ placeholder?: string;
};
const StyledDisplayModeReadonlyContainer = styled.div`
@@ -39,7 +40,6 @@ const StyledDisplayModeReadonlyContainer = styled.div`
font-family: inherit;
padding-inline: ${({ theme }) => theme.spacing(2)};
width: 100%;
- justify-content: space-between;
`;
const StyledDisplayModeContainer = styled(StyledDisplayModeReadonlyContainer)`
@@ -49,7 +49,12 @@ const StyledDisplayModeContainer = styled(StyledDisplayModeReadonlyContainer)`
&[data-open='true'] {
background-color: ${({ theme }) => theme.background.transparent.lighter};
}
- justify-content: space-between;
+`;
+
+const StyledPlaceholder = styled.div`
+ color: ${({ theme }) => theme.font.color.light};
+ font-weight: ${({ theme }) => theme.font.weight.medium};
+ width: 100%;
`;
const StyledSelectInputContainer = styled.div`
@@ -58,6 +63,11 @@ const StyledSelectInputContainer = styled.div`
top: ${({ theme }) => theme.spacing(8)};
`;
+const StyledSelectDisplayContainer = styled.div`
+ display: flex;
+ width: 100%;
+`;
+
export const FormSelectFieldInput = ({
label,
defaultValue,
@@ -67,6 +77,7 @@ export const FormSelectFieldInput = ({
clearLabel,
readonly,
preventDisplayPadding,
+ placeholder,
}: FormSelectFieldInputProps) => {
const inputId = useId();
@@ -215,6 +226,8 @@ export const FormSelectFieldInput = ({
...filteredOptions.map((option) => option.value),
];
+ const placeholderText = placeholder ?? label;
+
return (
{label ? {label} : null}
@@ -226,17 +239,21 @@ export const FormSelectFieldInput = ({
{draftValue.type === 'static' ? (
readonly ? (
- {isDefined(selectedOption) && (
-
+ {isDefined(selectedOption) ? (
+
+
+
+ ) : (
+
)}
) : (
@@ -246,13 +263,17 @@ export const FormSelectFieldInput = ({
>
Edit
- {isDefined(selectedOption) && (
-
+ {isDefined(selectedOption) ? (
+
+
+
+ ) : (
+ {placeholderText}
)}
handleFieldChange('fieldsToUpdate', fieldsToUpdate)
}
+ placeholder="Select fields to update"
/>