Radio
Radio buttons are used to select one option from a set of mutually exclusive options. They are commonly used in forms and surveys where only one choice is allowed. Use the interactive previews below to explore the component’s states, alignments, and sizes.
Loading Code Block...Full example
Section titled “Full example”A simple medium radio button with a title label.
Loading Code Block...Control the scale of the radio button using the `size` prop. Use the dropdown in the interactive demo below to toggle between `sm` and `md` sizes.
Loading Code Block...Alignment
Section titled “Alignment”Set the `alignment` prop to `right` or `left` to manage the position of the radio input relative to its label. Use the dropdown in the interactive demo below to toggle the alignment.
Loading Code Block...Disabled
Section titled “Disabled”Set the `disabled` prop to prevent user interaction. The interactive demo below demonstrates both unchecked and checked disabled states.
Loading Code Block...Selecting one option from a group
Section titled “Selecting one option from a group”React’s <Radio> is a boolean control with no built-in value concept. To build a single-selection group, hold the selected value in a parent state and derive each radio’s checked from it. Sharing a name lets the browser also enforce single selection on the underlying <input type="radio"> elements.
Vue’s <Radio> reads modelValue === value for its checked state. Two or more radios sharing the same v-model and different :value form a working group natively — no parent coordination needed.
Loading Code Block...Emits: update:modelValue — the new value of the radio that was selected.
Slots: #title, #subtext — take precedence over the matching string props when both are supplied.
Accessibility
Section titled “Accessibility”- The radio input uses standard HTML
<input type="radio">ensuring native screen reader support. - Wrapping the input and label in a semantic container ensures the clickable area correctly maps to the label for users with motor impairments.
- When
disabledis true, thedisabledattribute is passed directly to the underlying<input>element, correctly removing it from the tab order. - The
titleprop translates directly into the associated<label>tag text, providing proper accessible names. Keyboard focus uses a high-contrast ring outline. - Share the same
nameacross radios in a group so assistive tech announces them as a single set and arrow keys move between options.