diff --git a/packages/plugin-form-builder/src/collections/Forms/fields.ts b/packages/plugin-form-builder/src/collections/Forms/fields.ts index e020990a2..7a6fe29de 100644 --- a/packages/plugin-form-builder/src/collections/Forms/fields.ts +++ b/packages/plugin-form-builder/src/collections/Forms/fields.ts @@ -28,6 +28,95 @@ const width: Field = { label: 'Field Width (percentage)', } +const placeholder: Field = { + name: 'placeholder', + type: 'text', + label: 'Placeholder', +} + +const Radio: Block = { + slug: 'radio', + fields: [ + { + type: 'row', + fields: [ + { + ...name, + admin: { + width: '50%', + }, + }, + { + ...label, + admin: { + width: '50%', + }, + }, + ], + }, + { + type: 'row', + fields: [ + { + ...width, + admin: { + width: '50%', + }, + }, + { + name: 'defaultValue', + type: 'text', + admin: { + width: '50%', + }, + label: 'Default Value', + localized: true, + }, + ], + }, + { + name: 'options', + type: 'array', + fields: [ + { + type: 'row', + fields: [ + { + name: 'label', + type: 'text', + admin: { + width: '50%', + }, + label: 'Label', + localized: true, + required: true, + }, + { + name: 'value', + type: 'text', + admin: { + width: '50%', + }, + label: 'Value', + required: true, + }, + ], + }, + ], + label: 'Radio Attribute Options', + labels: { + plural: 'Options', + singular: 'Option', + }, + }, + required, + ], + labels: { + plural: 'Radio Fields', + singular: 'Radio', + }, +} + const Select: Block = { slug: 'select', fields: [ @@ -68,6 +157,14 @@ const Select: Block = { }, ], }, + { + type: 'row', + fields: [ + { + ...placeholder, + }, + ], + }, { name: 'options', type: 'array', @@ -576,6 +673,7 @@ export const fields = { message: Message, number: Number, payment: Payment, + radio: Radio, select: Select, state: State, text: Text, diff --git a/packages/plugin-form-builder/src/types.ts b/packages/plugin-form-builder/src/types.ts index ad2a7c800..0d5e1746d 100644 --- a/packages/plugin-form-builder/src/types.ts +++ b/packages/plugin-form-builder/src/types.ts @@ -97,6 +97,19 @@ export interface SelectField { label?: string name: string options: SelectFieldOption[] + placeholder?: string + required?: boolean + width?: number +} + +export interface RadioField { + blockName?: string + blockType: 'radio' + defaultValue?: string + label?: string + name: string + options: SelectFieldOption[] + placeholder?: string required?: boolean width?: number } @@ -175,6 +188,7 @@ export type FormFieldBlock = | EmailField | MessageField | PaymentField + | RadioField | SelectField | StateField | TextAreaField