<CustomField>

Search

Table of contents

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

PropAboutType
component

A reference to React component function to render the custom field.

Props:

  • inputFieldId (string): globally unique id that can be used for HTML references <label for={inputFieldId}> and <input id={inputFieldId}>.
  • locale (string): the user's current locale. Select localised strings (eg. from node) based on this.
  • node: a reference to node props.
  • name (string): for use in the 'name' attribute.
  • value (any): the current value (any type).
  • fieldState (object): React Hook Form ControllerFieldState object.
  • label: React component to render a label. Use it like {label}.
  • hint: React component to render a hint. Use it like {hint}.
  • error: React component to render an error. Use it like {error}.
  • onChange (function): set the updated value to Formally (any type).
  • onBlur (function): trigger validation checks, typically when bluring (leaving) a field.
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.

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

Whether users are required to fill in this form field.

The custom component should use this to affect aria-required and whether a * is displayed next to the form field, etc.

boolean
labelHtml

Localisable HTML: Label content

E.g.

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

The name attribute in HTML (MDN name attribute)

Name of the form control.

Submitted with the form as part of a name:value pair in the <Formally onSubmit> callback prop valuesAsFormNames.

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 <Select>, <Radios> or <Checkboxes>.

false
type

Non-editable.

Type of component of "DateInput".

"CustomField"