Components
Radio
Restyled native radio inputs grouped for single-choice selection.
Radios apply the .ui-radio class to native <input type="radio"> controls. Group elements by assigning matching name attributes inside a .ui-radio-group container.
Default
Loading components…
<fieldset class="ui-radio-group"> <legend>Options</legend> <div class="flex flex-col gap-xs"> <label class="ui-field" data-orientation="horizontal"> <input class="ui-radio" type="radio" name="radio-options-example" value="option-1" /> <span data-slot="field-label">Option 1</span> </label> <label class="ui-field" data-orientation="horizontal"> <input class="ui-radio" type="radio" name="radio-options-example" value="option-2" checked /> <span data-slot="field-label">Option 2</span> </label> <label class="ui-field" data-orientation="horizontal"> <input class="ui-radio" type="radio" name="radio-options-example" value="option-3" /> <span data-slot="field-label">Option 3</span> </label> </div></fieldset>/** * radio.css — Radio (.ui-radio, .ui-radio-group) * * @layer variables, components * @requires layers.css, _variables.css, fields.css (.ui-field-group layout) * @uses appearance: none — custom circle + radial-gradient dot when :checked * @tokens --ui-radio-* (@layer variables) */@layer variables { :root { --ui-radio-size: var(--step-4_5); --ui-radio-background: var(--input); --ui-radio-background--checked: var(--primary); --ui-radio-border: var(--border); --ui-radio-border--hover: var(--primary); --ui-radio-border--checked: var(--primary); --ui-radio-radius: var(--radius-full); --ui-radio-background-size: 90%; --ui-radio-dot-foreground: var(--primary-foreground); --ui-radio-dot-inner-stop: 28%; --ui-radio-dot-outer-stop: 30%; --ui-radio-dot-gradient: radial-gradient( circle, var(--ui-radio-dot-foreground) 0 var(--ui-radio-dot-inner-stop), transparent var(--ui-radio-dot-outer-stop) ); }}@layer zazz.components { /* =========================================================================== RADIO — .ui-radio (+ .ui-radio-group) - appearance: none redraws the circle from theme tokens; the checked dot is a radial-gradient so it tracks --ui-radio-dot-foreground, not colour alone. - Group by shared `name`; wrap in a <fieldset>/<legend> or .ui-radio-group for an accessible labelled set. =========================================================================== */ .ui-radio { appearance: none; flex-shrink: 0; inline-size: var(--ui-radio-size); block-size: var(--ui-radio-size); background-color: var(--ui-radio-background); border: 1px solid var(--ui-radio-border); border-radius: var(--ui-radio-radius); background-repeat: no-repeat; background-position: center; background-size: var(--ui-radio-background-size); cursor: pointer; /* ring renders as box-shadow; transparent outline twin keeps focus visible in forced-colors / high-contrast modes */ --_ring-offset-width: 0px; --_ring-width: 0px; box-shadow: 0 0 0 var(--_ring-offset-width) var(--ring-offset-color), 0 0 0 calc(var(--_ring-offset-width) + var(--_ring-width)) var(--_ring, var(--ring)); outline: var(--outline-width) var(--outline-style) transparent; outline-offset: var(--outline-offset); transition: var(--default-transition); } .ui-radio:hover { border-color: var(--ui-radio-border--hover); } .ui-radio:focus-visible { --_ring-offset-width: var(--ring-offset-width); --_ring-width: var(--ring-width); outline-color: transparent; } .ui-radio:checked { background-color: var(--ui-radio-background--checked); border-color: var(--ui-radio-border--checked); background-image: var(--ui-radio-dot-gradient); }}