Mushilu-San UI Radio
A native radio button for choosing exactly one option from a set.
Selector: input[type=radio][muiRadio]
import { Radio } from '@mushilu-san/ui/forms';Loading example…
Overview
<input type="radio">. Radios that share a name form one group: only one can be checked, and the arrow keys move between them.
<fieldset> with a <legend> so screen readers announce the question with each option.
When to use
Choosing one option from a short list, where all options should be visible. Choosing between two to five options that each need an explanation.
When not to use
Choosing one option from a long list. Use a select. Choosing several options. Use checkboxes. Use Checkbox instead.
Examples
Sizes
Loading example…
Guidelines
Do
Put a question in the legend of the fieldset. Pre-select a sensible default when there is one.
Don't
Do not use a radio group with only one option. Do not use radios for a yes/no choice that needs to be remembered. Use a toggle or checkbox.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
input[type=radio] | radio (native) |
Keyboard
| Keys | Action |
|---|---|
| TabShiftTab | |
| Arrow keys | |
| Space |
Each radio needs a visible label. Group radios with nameand afieldset.
API
Radio
| Name | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Radio size: `sm`, `md` or `lg`. Default `md`. |
CSS parts
::part(radio)
Tokens
--mui-color-primary--mui-color-border--mui-color-focus-ring--mui-touch-target