.talos-fieldset is the grouping divider: a single 1px top rule with a tiny
uppercase legend riding it, then a stacked column of controls below. No box, no
fill — the rule alone says “these belong together”, mirroring the contact form’s
top line that splits off secondary fields.
Default
<fieldset class="talos-fieldset">
<legend class="talos-fieldset__legend">Toggles</legend>
<label class="talos-check-row"><input class="talos-checkbox" type="checkbox" checked /> Enable auto-scaling</label>
<label class="talos-check-row"><input class="talos-checkbox" type="checkbox" /> Send alerts</label>
</fieldset>The fieldset is a flex column with 1.25rem gap and a 1px top border; the
legend sits in display font, wide tracking, dimmed to 40% — pure HUD label
voice. Grouped controls are typically .talos-check-row
labels, but any control stacks the same way.
Bare legend
<fieldset class="talos-fieldset">
<legend>Network</legend>
<label class="talos-check-row"><input class="talos-switch" type="checkbox" checked /> Live telemetry</label>
</fieldset>A direct <legend> child is styled the same as .talos-fieldset__legend, so
the native element needs no extra class — reach for the modifier only when the
legend isn’t a <legend>.
Classes
| Class | Effect |
|---|---|
.talos-fieldset | top-ruled flex column (1.25rem gap) that groups controls |
.talos-fieldset__legend | tiny uppercase HUD legend, dimmed to 40% |
> legend | a native <legend> child inherits the same legend styling |
Stack .talos-check-row labels inside, or any
.talos-field controls.