Radio
A native radio input styled as a small round dot.
Basic
Add .radio to the input. Wrap each input + label pair in .field__item inside a .field, and give every radio in the group a shared name so the browser handles single-selection.
Inline
Add .field--inline on the field root to lay items on one row with wrap.
Reverse
Add .field__item--reverse to flip the label to the start and the input to the end.
Disabled
Add disabled to dim the input and its label, and block interaction.
Browser validation
Pair required on any radio in the group with :user-invalid. The browser fires it after a submit attempt, and clears it once any radio in the group is selected.
Server validation
Set aria-invalid="true" from your form library. The attribute is sticky; Stisla just paints the red while it's present. The selected variant shows both signals at once.
Without labels
Drop the .field__item wrapper for a bare .radio. Always pair with an aria-label.
Customization
These variables retune .radio without touching component CSS. Override on the input, a parent scope, or :root.
| Variable | Use |
|---|---|
--radio-size | Dot diameter |
--radio-bg | Unchecked background |
--radio-border-width | Border thickness |
--radio-border-color | Unchecked border; validation hooks flip this to the danger token |
--radio-bg-checked | Selected background |
--radio-indicator | Dot SVG painted over the selected fill; the fill is a literal because data: URLs can't read CSS vars, so recolor by replacing the URL |