Fieldset groups related elements in a form.
Overview
A fieldset groups related fields together in a logical set to create a hierarchy that helps the user understand and complete related inputs. There can be multiple fieldsets in one form.
Anatomy
- Legend: Text that describes the purpose of the fieldset.
- Description (optional): Provides additional context about the fieldset or the information that needs to be input.
- Fields: Inputs grouped within the fieldset.
Demo
Open the component in Figma.
When to use
To group related fields in a form.
When not to use
When fields aren’t related, wrap them in a form without using a fieldset. See Form.
Similar components
Behaviors
Fieldset-level error
If your form uses fieldsets, then a group error can appear above the fieldset in a callout. This allows multiple errors in a section to be highlighted closer to the affected inputs.
Accessibility
Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.
Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone.
Content guidelines
Legend
- The title of the fieldset.
- Makes the relationship between the fields grouped in a fieldset clear.
- The legend is always visible.
- The legend should be short and clear — ideally one to five words and never longer than one line of text.
- Legends should typically be nouns. For example, User information not Enter user information.
- Write in sentence case (capitalize the first word and proper nouns only).
- Don’t use colons after legends.
Description (optional)
- Provides additional context about the fieldset or the information that needs to be input.
- A description should be limited to a single line, though multiple lines can be allowed sparingly if there isn’t a concise way to explain the set.
- Write in sentence case (capitalize the first word and proper nouns only) and use full sentences with punctuation.
- If the description repeats the title, don’t include it.
Fields
- Inputs grouped within the fieldset. Group the fields to help users understand what is required of them in a logical way.
- These can be: checkbox, date picker, radio group, select and text field.
- See the appropriate component’s content guidelines for specific content guidance.
Content accessibility
All fields are required to have an accessible label visible. Search fields are an exception to this and use placeholder text and an aria-label.