Unofficial
Internal
Components
Form group
Internal
A group of form fields.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| id | string | - | 'id' attribute to place on the base HTML element |
| classBlock | string | - | Block name override in BEM style classes applied to all elements |
| classModifiers | Modifiers | [] | BEM style modifiers to apply to the base HTML element |
| className | string | - | Extra classes to apply to the base HTML element |
| error | ReactNode | - | |
| errorId | string | - | |
| fieldId | string | - | |
| hint | ReactNode | - | |
| hintId | string | - | |
| label | ReactNode | - | REQUIRED. |
| labelCaption | ReactNode | - | Caption for the section the question belongs to, shown above the label |
| labelClassModifiers | Modifiers | - | BEM style modifiers to apply to the label (or legend) |
| labelHeading | ElementType | - | Component to wrap the label (or legend) in, making it a heading |
| standalone | boolean | - |
Stories
Standard
A standard Form group.
Label
A Form group with just a label instead of a fieldset and legend.
Error
A Form group with a validation error.
Label modifiers
A Form group with a medium-sized label. labelClassModifiers applies BEM
modifiers to the label, or to the legend where there is a fieldset.
Heading
A Form group whose label is a heading, set with labelHeading. With a fieldset
the heading goes inside the <legend>; with a label it goes around the
<label>, which is the only place it can validly go.
It takes any component, so a question that is the page heading asks for "h1"
and one that is a sub-heading on a page of several asks for "h2". The label
or legend is sized to match the level, following the hierarchy GOV.UK uses on
a page that is not long form content, unless labelClassModifiers says
otherwise.
Caption
A Form group whose question belongs to a wider section, named with
labelCaption. It sits above the label or legend, and outside both, which is
where GOV.UK puts it on a question page: a caption within a legend would be
read out again for every field in the fieldset.
It is sized to match the label, so it needs no size of its own.