Repeatable Fields & Field Sets

The Form component supports a repeatable field type which accepts and array of field objects
to define a field group. This helps the user with common array/list manipulations, such as "add
another address or person".

The field returns an array of key/value objects for each field group the user adds.

Required Props

• fields - array of field objects
• label - string
• name - string

Additional Props

• addButton - props object to customize the add button. Supports a text property to replace the default + and all other props will be passed to the Button component
• className - Additional classes to be added to the root div element
• deleteButton - props object to customize the delete button for all field groups. Supports a text property to replace the default - and all other props will be passed to the Button component
• hint - Additional hint text to display
• labelClassName - Additional classes to be added to the label
• max - maximum number of field groups allowed
• requirementLabel - Text showing the requirement ("Required", "Optional", etc.).

{
 type: 'repeatable',
 label: 'This is a repeatable set of fields',
 name: 'repeat_all_the_fields',
 fields: [
   {
     type: 'text',
     name: 'repeat_input',
     label: 'Repeat Input'
   }
 ]
}

Required:
children
label
name
type

Additional Props:
ariaLabel
checked
checkedChildren
uncheckChildren
className
defaultChecked
disabled
errorMessage
hint
inputClassName
id
labelClassName
value

The Form component supports content field types which accept a Component function to be rendered. They are provided the all RHF props and actions, in addition to internal form values.

Content fields are removed from the form value set.

• goBackToPage - function to return to a form page in the pageHistory.
  -parameter*: integer
• pageHistory - array of page indexes (integers) that have been visited in the form.
• pages - array of page objects provided in the form schema.

Required:
choices
label
name
type

Additional Props:
ariaLabel
className
defaultValue
disabled
errorMessage
hint
inputClassName
id
labelClassName
labelId
requirementLabel
value

Required:
label
name
type

Additional Props:
ariaLabel
className
defaultValue
disabled
errorMessage
hint
inputClassName
id
labelClassName
labelId
requirementLabel
rows
value

Basic input field

Required:
label
name
type

Additional Props:
defaultValue
disabled
errorMessage
inputClassName
id
labelClassName
labelId
requirementLabel
value

Branching

The Form component supports logic for navigating to specific form pages;
including conditional navigation based on form field answers. By default, the
form will navigate sequentially through the pages array. Branching is defined
by adding the optional action object to a page object.

Page action object

pages: [
  {
    id: 'page_1',
    action: {
      type: 'goto',
      pageId: 'another_page_id' || (values) => {
        if(values.field_1 === 'A') {
          return 'page_3'
        } else {
          return 'page_2'
        }
      },
      buttonText: 'Custom continue button text'
    }
  }
]

• type: options aregoto** andnext**(default).
  -goto* requires the*page_id** to be defined
  -next* is set as the default for sequential page direction.
• pageId: accepts either astring** orfunction**.
  • The string must be a valid page object id in the form schema, invalid Ids
    will throw an error.
  • The function receives a form values object as its sole parameter and
    expects a string (page_id) to be returned. It should be used to resolve
    conditional branching logic based on the page field values.
• buttonText: optional string for custom text applied to the "continue" or
  "submit" button

Dynamic Checkbox/Radio/Select Choices

Checkbox, Radio, and Select field types allow for their choice options to dynamically update
based on the string value of a single parent field. Dynamic choice options are defined by two
objects. The first object accepts two parameters:

• parentField: string
• choices: object

The second, nested choices object is a key/value pair:

• key: string value which matches parent field value
• value: array of choice objects to display

{
  type: 'select',
  name: 'dynamic_choice_field',
  choices: {
    parentField: 'sample_parent_field',
    choices: {
      orange: [
        { label: 'Tangerine', value: 'tangerine'},
        { label: 'Clementine', value: 'clementine' },
        { label: 'Navel', value: 'navel' }
      ],
      apple: [
        { label: 'Honeycrisp', value: 'honeycrisp' },
        { label: 'McIntosh', value: 'mcintosh' },
        { label: 'Ambrosia', value: 'ambrosia' },
        { label: 'Empire', checked: true, value: 'empire' },
        { label: 'Granny Smith', value: 'granny_smith' }
      ],
      lemon: [
        { label: 'Meyer', checked: true, value: 'meyer' },
        { label: 'Ponderosa', value: 'ponderosa' }
      ]
    }
  }
}

Extend input field and use inputMode, type, and pattern to number in order to improve a11y. See this documentation: https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/

Required:
label
name
type

Additional Props:
ariaLabel
className
defaultValue
disabled
errorMessage
inputClassName
id
labelClassName
labelId
requirementLabel
value

Field wrapper to map field components

Required:
label
name
type

Additional Props:
ariaLabel
className
defaultValue
disabled
errorMessage
hint
inputClassName
id
labelClassName
labelId
requirementLabel
value

**Conditions should be defined on each field object rather than nested array for conditional fields coupled to a single parent field. This will allow fields to satisfy conditions with multiple parents, including those on other pages. **

Conditional Fields

The Form component provides a simple way to define additional fields that
will be conditionally displayed based on user selected values.
For example: a radio field has a choice of Other, and when the user selects
Other a new text field is displayed for the user to enter the custom value.

Negative conditions (not) are supported where a field should not be displayed if the parent
value matches the designated value(s). Negation supercedes value conditions such that a field
will not be displayed if the parent value matches both a value and not condition.

value = 'any' is supported where you want to display a conditional field once the parent field
has any valid field value (i.e. not an empty string or array.)

Each field defined in the JSON fields array has an optional attribute named
conditionals. It has three attributes:

• fields: array of field objects to display for the condition.
• not: string or array of strings
• value: string or array of strings

type: 'radio',
choices: [
  { label: 'A', value: 'A' },
  { label: 'B', value: 'B' },
  { label: 'C', value: 'C' },
  { label: 'Other', value: 'Other' }
],
name: 'select_1',
conditionals: [
  {
    value: 'Other',
    not: 'C',
    fields: [
      {
        type: 'text',
        label: 'Enter other value',
        name: 'select_1_other'
      }
    ]
  }

Required:
choices
label
name
type

Additional Props:
ariaLabel
className
defaultValue
disabled
errorMessage
hint
inputClassName
id
labelClassName
labelId
requirementLabel
value