Anatomy
- Label: (Optional) Descriptive text detailing the Fieldset's need
- Hint: (Optional) Text to help the user understand context
- Form Element: A component used in forms, ie Radio and Checkbox
- Error Message: (Optional) Text to help the user understand context or provide error messaging
Usage Guidelines
When to use this component
- Use a Fieldset to organize logically connected items like a set of radio buttons, checkboxes, or a group of address fields. The shared border and a clear title provided by the <legend> make the form’s purpose clearer.
- The main purpose of a Fieldset is to create a semantic relationship between form controls.
When not to use this component
- Don’t use a Fieldset to group form controls that don’t belong together and doesn’t have semantic relationchip between each other. This component should serve as functional purpose and must not mislead users and assistive technologies.
- The fieldset element is specifically for form controls. It's not a substitute for structuring major sections of a webpage. For that, use appropriate HTML5 semantic elements like <section>, <article>, or <div>.
Best Practices
Use the Fieldset component to group a set of related inputs i.e. checkboxes or radio button.
Don't use the Fieldset with just one input.
Provide a clear label to explain available choices to the user.
Don't omit the label. Omitting the label makes context hard to understand.
Use error to show validation message for a fieldset.
Don't show a validation message for each input.
Consider using inline alignment when vertical space is limited and labels are short and clear.
Don't use inline alignment when items include long labels and hints. This will make content harder to scan.
General Component Behaviors
A Fieldset groups components to make forms easier to implement. Currently our Fieldset only supports checkbox and radios.
The Fieldset provides a label, hints, or error messages when needed.
Most commonly Fieldset items are stacked vertically.
If a feature needs, Fieldset items can be stacked inline.
Responsive Behavior
Inline fieldset items automatically wrap to a vertical layout as the container's width decreases. This ensures a responsive design that maintains readability and usability across different screen sizes. Essentially, when the space is too narrow for an inline arrangement, the items will stack, mirroring the structure of a standard vertical fieldset.
Variants
Checkbox Group
For the usage and behavior guidelines, see Checkbox.
Radio Group
For the usage and behavior guidelines, see Radio.
Known Gaps
- Accessibility guidelines
- Improve Fieldset to expand to other form elements, such as fields.
- Potentially update the mental model:
- Our current component structure, tied to the fieldset model, can make it difficult to find and reuse individual components. Evolving our mental model to a more flexible system where components are detached from fieldsets could improve this.