Radio

Native radio geometry with a consumer-owned dot color. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• radio

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<fieldset>
  <legend>Display density</legend>
  <label><input class="radio focus-ring bg-color:neutral-100 border-color:neutral-700 text-color:primary-950 bg-color:current@::before" type="radio" name="density" value="comfortable" checked>Comfortable</label>
  <label><input class="radio focus-ring bg-color:neutral-100 border-color:neutral-700 text-color:primary-950 bg-color:current@::before" type="radio" name="density" value="compact">Compact</label>
</fieldset>

Variants and composition

radio keeps native checked, focus, and disabled behavior. Use Standard utilities or the theme for its border, dot, and focus color.

Behavior and accessibility

The native input owns selection, form value, focus, and disabled state. Supply a visible label and consumer-owned mark/outline colors.

Use a shared name for one selection group. The example paints the dot’s ::before with currentColor. Native inputs restore their browser appearance in forced colors and hide the custom dot; a custom ARIA control must supply its own system-color marks and keyboard model.

Reference

See the interactive Storybook specimen ↗. Continue to Range or return to the Official preset overview.