<CustomField>







Allows custom React components to create form fields in Formally.
Use of <CustomField>
<CustomField
name="google-maps"
isRequired={false}
labelHtml={{ en: 'Pick a location' }}
hintHtml={{ en: '' }}
validationErrorRequiredHtml={{ en: '' }}
validationErrorInvalidHtml={{ en: '' }}
component={({ inputFieldId, value, onChange, node, name, locale }) => {
return (
<div>
<label
htmlFor={inputFieldId}
dangerouslySetInnerHTML={{ __html: node.labelHtml[locale] }}
/>
<input
id={inputFieldId}
value={value}
onChange={(e) => onChange(e.target.value)}
/>
</div>
);
}}
/>
<CustomField>
's props
Prop | About | Type |
---|---|---|
component | A reference to React component function to render the custom field. Props:
| React.FC<{ inputFieldId: string; locale: string; node: NodeCustomField; name: string; value: any; fieldState: ControllerFieldState; label: JSX.Element; hint: JSX.Element; error: JSX.Element; onChange: (value: any) => void; onBlur: () => void; }> |
hintHtml | Localisable HTML: hint content E.g.
| LocalisedHtml |
isRequired | Whether users are required to fill in this form field. The custom | boolean |
labelHtml | Localisable HTML: Label content E.g.
| LocalisedHtml |
name | The Name of the form control. Submitted with the form as part of a name:value pair in the | string |
validationErrorInvalidHtml | Localisable HTML: invalid validation content | LocalisedHtml |
validationErrorRequiredHtml | Localisable HTML: required validation content | LocalisedHtml |
id | Component Id. Must be unique within the form. | string |
hasChildrenById | Non-editable. Used to indicate that this component doesn't have children. | false |
hasTagsById | Non-editable. Used to indicate that this component isn't a form field with tags by id. | false |
isFormField | Non-editable. Used to indicate that this component is a form field. | true |
isMultichoice | Non-editable. Used to indicate that this component isn't a multichoice form field like | false |
type | Non-editable. Type of component of | "CustomField" |