Fieldset
Form component to group thematically related form fields together.The <Fieldset /> component is used as a wrapper around a set of form fields, typically checkboxes or radios. This helps screen readers to know that this is a group of form fields that are related to each other.
Provide a short legend that describes the group of form fields that the set consists of.
If you need to provide additional information to help the user fill in the set of fields, you can use the description prop. This text will also render inside the <legend> element so that it gets read out by screen readers, but is styled as a smaller paragraph to help visual digestion.
Use the legendStyle prop to control the font size of – and the spacing below – the legend. The fieldset supports two styles:
- section (default) - For larger form sections, containing a set of text fields e.g.
- group - For smaller groups, containing a set of checkboxes or radios e.g.
NOTE: It is considered OK to nest a fieldset inside another fieldset (group inside a section e.g.), but is best avoided as some screen readers struggle to let the user know when they've exited the fieldset.
Use the heading prop to control the legend's heading configuration. The heading has two properties:
- as - The HTML element to render the heading as (e.g. 'div', 'h1', etc.). This property is optional.
- level - The level of the heading (1-6). For example, heading={{ level: 3 }} renders as <h3>. This property is required if you pass a heading.
You can use these properties to customize the appearance and structure of the legend's heading.
Set the removeSpaceForLastFieldMessage prop to true when you are stacking multiple fieldsets. This visually removes a space.large from the bottom of the fieldset, using negative margin. This is to create an even vertical rhythm when nesting Fields (or other components that have keepSpaceForMessage on by default) in your fieldsets. See the difference it makes below:
Use the disabled prop to control whether the descendant form controls are disabled. Components that support this context and will get the correct inherited styles are: