Components
Radio
Restyled native radio inputs, grouped for single-choice selection.
Radios apply the .radio treatment to native <input type="radio"> inputs. Group them with a
shared name (and a .radio-group wrapper) so only one can be selected at a time.
Default
Loading components…
<fieldset class="radio-group"> <legend>Options</legend> <div class="flex flex-col gap-xs"> <label class="field" data-orientation="horizontal"> <input class="radio" type="radio" name="radio-options-example" value="option-1" /> <span class="field__label">Option 1</span> </label> <label class="field" data-orientation="horizontal"> <input class="radio" type="radio" name="radio-options-example" value="option-2" checked /> <span class="field__label">Option 2</span> </label> <label class="field" data-orientation="horizontal"> <input class="radio" type="radio" name="radio-options-example" value="option-3" /> <span class="field__label">Option 3</span> </label> </div></fieldset>