<CustomField>

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

{
  en: '<p>Welcome to my form</p>',
}

{
  en: '<p>Welcome to my form</p>',
}