Radio
One choice from 2–6 options shown together.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<fieldset class="px-choice-group">
<legend>Billing</legend>
<label class="px-check px-radio"><input type="radio" name="bill" class="px-check__box" checked> Monthly billing <span class="px-check__hint">Pay month to month, cancel any time.</span></label>
<label class="px-check px-radio"><input type="radio" name="bill" class="px-check__box"> Yearly billing <span class="px-check__hint">Save 20% with one payment a year.</span></label>
</fieldset>Usage
- Pre-select the most common option.
- More than 6 options? Use a Select.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
States
<div class="row">
<label class="px-check px-radio"><input type="radio" name="st" class="px-check__box"> Default</label>
<label class="px-check px-radio"><input type="radio" name="st" class="px-check__box" checked> Checked</label>
<label class="px-check px-radio"><input type="radio" name="st2" class="px-check__box" disabled> Disabled</label>
<label class="px-check px-radio"><input type="radio" name="st3" class="px-check__box" aria-invalid="true"> Error</label>
</div>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-check px-radio | class | Radio row. |
px-check__box | class | Put on <input type="radio">. |
Figma properties
Radio48 variants · page “Checkbox & Radio Buttons”Open
Radio with label and optional hint. Use for one choice from 2–6 options shown together; group with role=radiogroup and arrow-key navigation. RTL variants place the control on the right. RTL text: Labe…
| Property | Type | Values |
|---|---|---|
| Label | Text | “Monthly billing” |
| Hint | Text | “Pay month to month, cancel any time.” |
| Show hint | Boolean | — |
| Size | Variant | Small Medium |
| Checked | Variant | False True |
| State | Variant | Active Hover Pressed Focused Disabled Error |
| Direction | Variant | LTR RTL |
Radio / Control24 variants · page “Checkbox & Radio Buttons”Open
The bare radio circle. Tokens: --px-selection-*, --px-radio-*.
| Property | Type | Values |
|---|---|---|
| Size | Variant | Small Medium |
| Checked | Variant | False True |
| State | Variant | Active Hover Pressed Focused Disabled Error |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-selection-gap | spacing-sm | 8px |
--px-radio-size-sm | spacing-16 | 16px |
--px-radio-size-md | spacing-20 | 20px |
--px-radio-radius | radius-full | 999px |
--px-radio-dot-sm | spacing-8 | 8px |
--px-radio-dot-md | spacing-8 | 8px |
Accessibility
- Native radios give arrow-key navigation inside the group.
- Use a fieldset + legend.