Modifiers
With help text
Add help text to further explain the fieldset’s purpose. Use help text if there is too much information to fit into the fieldset legend and if that information doesn’t belong in control-level help text.
With error message
If a selection or input within the fieldset throws a group-level error, an error message will appear below the legend.
With help text and error message
If a fieldset requires help text and throws a group-level error, an error message will appear below the legend.
States
Disabled
A fieldset can be disabled if the experience requires it. If you need to disable a fieldset, make sure the reason is obvious. If the reason is not obvious, you can keep the fieldset enabled and add an error message to explain. The user’s selections or inputs within the disabled fieldset will not be submitted with the form’s data.
Usage
A fieldset can contain one or more form controls. Checkbox groups is one example of a fieldset containing one control.
Use fieldsets to group related form controls. Fieldsets help break up long, complicated forms into sections. The fieldset legend should describe the purpose of the group of form controls.
Examples of common fieldsets within larger forms:
- Shipping and billing addresses
- Numbered steps
- Personal information
- Payment information
- Contact information
Layout
Forms should always be arranged vertically, including checkboxes and radio groups. See the User Research section for more information.
Do:
- Group related form controls together using a fieldset
- Arrange fieldset controls vertically in one column
- Structure the fieldset in a logical and predictable order for when the user should or would fill out the form controls
Don't:
- Group unrelated controls or controls that don’t belong under the same legend
- Arrange form controls horizontally or in multiple columns
- Use for single checkboxes
- The only exception to this is the terms and conditions agreement layout
Content guidelines
Do:
- Give the fieldset a descriptive legend that applies to the whole group of form controls
- Add group-level help text when necessary
- Write in sentence case
Don't:
- Write vague fieldset legends
- Rely on error messages to deliver important information
User research
Key takeaways
Group related fields
Chunking related information helps users better understand the information they are being asked to enter. Grouping also provides a flow for the user to move through, is less overwhelming, and helps users focus on one section at a time.
Study links
Primary sources (BSC user research)
No BSC sources
Secondary sources
Venture Harbor — 58 Form Design & UX Best Practices Medium — Designing More Efficient Forms
Accessibility
This component passes AAA WCAG standards. However, changes made by the content owner or implementer could impact accessibility compliance. Be sure to follow code standards, usage guidelines, and content guidelines to ensure that this component is fully accessible.
For more information, see WAI-ARIA forms tutorial for grouping controls and Deque’s screen reader keyboard shortcuts and gestures documentation.