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.
VB Styling
Vanilla Breeze sets font-weight: 600 and padding-inline: var(--size-xs) on legend. In a bordered fieldset, the legend visually breaks the top border. In a fieldset.minimal, the legend loses its inline padding and gains a bottom margin, acting as a section heading at font-size: var(--font-size-md).
Basic Usage
A legend provides the accessible name for its fieldset group.
<fieldset> <legend>Personal Information</legend> <!-- form fields --></fieldset>Visual Styles
Default (Bordered Fieldset)
In a standard fieldset with a visible border, the legend appears inset in the top border.
Minimal Fieldset
In a fieldset.minimal, the border is removed and the legend appears as a section heading with increased font size and a bottom margin.
<fieldset class="minimal"> <legend>Preferences</legend> <label> <input type="checkbox" name="prefs" value="dark" /> Dark mode </label> <label> <input type="checkbox" name="prefs" value="reduce" /> Reduce motion </label></fieldset>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"
Rich Content in Legends
Legends can contain simple inline content but should remain concise.
<fieldset> <legend><strong>Required:</strong> Contact Details</legend> <!-- form fields --></fieldset>Nested Fieldsets
When nesting fieldsets, each needs its own legend for proper hierarchy. A common pattern is a bordered outer fieldset with minimal inner fieldsets.
<fieldset> <legend>Shipping Information</legend> <fieldset class="minimal"> <legend>Address</legend> <!-- address fields --> </fieldset> <fieldset class="minimal"> <legend>Delivery Options</legend> <!-- radio buttons --> </fieldset></fieldset>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
CSS Reference
legend { font-weight: 600; padding-inline: var(--size-xs);} /* In a minimal fieldset, legend acts as a section heading */fieldset.minimal > legend { padding: 0; margin-block-end: var(--size-s); font-size: var(--font-size-md);}