<CustomField>







Allows custom field extensions to Formally forms in JSX
This documentation page is about Custom Fields in JSX specifically. To read more generally about Custom Fields in Formally.
When using React JSX you may implement a Custom Field resolver as...
Use of <CustomField>
<CustomField
id="myCustomField"
name="map-picker"
labelHtml={{ en: 'your custom component label' }}
component="myCustomField"
/>
Provide a resolver for myCustomField
with the customFields
prop,
<Formally customFields={{ myCustomField: myComponent }} />
const myComponent = ({
inputFieldId,
locale,
node,
name,
value,
fieldState,
label,
hint,
error,
onChange,
onBlur,
}) => {
// your custom component goes here and
// it can be anything you want.
//
// Use the 'value' prop, and 'onChange' to
// update the value in Formally. Use 'onBlur'
// to trigger validation checks.
//
// For accessibility reasons be sure to use
// the 'label' prop or (render your own label
// using htmlFor=inputFieldId )
return (
<>
{label}
<input
id={inputFieldId}
value={value}
onChange={(e) => onChange(e.target.value)}
onBlur={onBlur}
/>
</>
);
};
<CustomField>
's props
Prop | About | Type |
---|---|---|
component | a The | string |
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 |
meta | Arbitrary metadata on this node. This is useful when developing custom controls as it allows you to pass down metadata/extensions. | MetaData |
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" |