legend
Provides a caption for a fieldset element. The legend is announced by screen readers as the group's label, making it essential for accessibility.
When to Use
- Always as the first child of a fieldset
- Labeling groups of related form controls
- Providing context for radio button or checkbox groups
- Sectioning complex forms into logical parts
Important: The legend must be the first child of a fieldset for proper rendering.
Basic Usage
A legend provides the accessible name for its fieldset group.
Code
Visual Styles
Default (Bordered Fieldset)
In a standard fieldset, the legend appears to break the top border.
Minimal Fieldset
In a minimal fieldset, the legend appears as a section heading.
For Radio Groups
Radio buttons should always be in a fieldset with a legend. Screen readers announce the legend before each option.
Screen Reader Behavior
When navigating radio buttons, screen readers announce:
- "Select Payment Method, radio group"
- "Credit Card, radio button, 1 of 3, checked"
- "PayPal, radio button, 2 of 3"
For Checkbox Groups
Group related checkboxes with a legend to provide context.
Rich Content in Legends
Legends can contain simple inline content but should remain concise.
Code
Nested Fieldsets
When nesting fieldsets, each needs its own legend for proper hierarchy.
Accessibility Notes
- Must be first child: The legend must be the first element inside a fieldset
- Keep concise: Legends should be brief but descriptive
- Announced as group label: Screen readers use the legend to introduce the fieldset
- Required for radio groups: Always use fieldset/legend for radio button groups
- Don't hide visually: Unlike labels, legends should remain visible when possible