Skip to main content

Form Group

A wrapper that encapsulates a question with all of the style and accessibility requirements including the label, form control, help text, error message and help link.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { FormGroup } from '@iag/chroma-react-ui.components';

Accessibility​

Accessibility Documentation(opens in new window)

Default Example​

Form controls, such as most inputs, textareas and selects should always include a label.

Fieldset Example​

Form controls such as:

  • radios
  • checkboxes
  • segmented controls
  • radio blocks

Should always include a legend as well as individual labels for each selectable option.

Help Text Example​

Help text can be used to provide users with information that will help them fill in the field.

Error Message Example​

An error message must be displayed when the form field has been defined as invalid.

A help link is used where a large amount of additional information needs to be presented to the user to help provide context for the form field.

Complex Help Text Example​

Sometimes inputs may need additional content to help define the question better for the user. The helpText prop can also be used to pass in components to allow for this, however this method is not recommended and only to be used when other solutions are not possible.

Optional Input Example​

The optional prop will render optional text within the label and also set required="false" for the input

Properties​

Name
Description
  • className
    stringPass in a class to the outer container
  • error
    stringError message to display
  • helpText
    ReactNodeText displayed below the label providing additional context
  • helpLink
    FormGroupHelpLinkDisplay a help link below form field
  • id
    stringHTML id attribute for the component
  • label
    stringLabel text to display
  • labelHidden
    booleanshould label only be available to screen readers
  • legend
    stringLegend used for radio and checkbox inputs
  • optional
    booleanIf optional is true, "(optional)" rendered in label or legend
  • ref
    RefObject<HTMLInputElement> | RefObject<HTMLTextAreaElement>

CSS Variables​