CSS Showcase · Live Demo
Group it, name it, disable it.
Fieldset and legend do what divs can't: named form groups with a floating border title, a real accessible name for radio groups, and one-attribute disabling.
Featured demo
mobile · stackedmobile design patterns
fieldset-stacked.css
/* Stacked sections on mobile */
.section-stack {
display: grid;
gap: 1rem;
}
.section-stack .fieldset {
border: 1px solid var(--border);
border-radius: 1rem;
padding: 0.9rem 1rem 1.1rem;
display: grid;
gap: 0.7rem;
background: var(--card);
}
.section-stack legend {
padding-inline: 0.4rem;
font-size: 0.78rem;
font-weight: 700;
}
.section-stack .summary-row {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
}
.section-stack .summary-row span:last-child {
font-weight: 700;
font-variant-numeric: tabular-nums;
}CSS features used
- • fieldset + legend
- • fieldset:disabled
- • :has(input:checked)
- • accent-color on radios
- • color-mix() tints
- • Semantic tokens