Radio
Radio button is a form control for making a single selection from a short list of options.
Page navigation navigation
React
readyNot reviewed for a11y
Rails
readyNot reviewed for a11y
Figma
A radio button may not be used on its own: it must be rendered in a group of related radio buttons.
See the RadioGroup guidelines for usage examples.
Best practices
- A radio button may not be used on its own: it must be rendered in a group of related radio buttons using a RadioGroup.
- Radio buttons cannot be unchecked, so only use radio buttons when a selection is required
- An individual Radio should not have its own validation message or style. Instead, show a validation message on the RadioGroup. For more information, see the Validation Message section in the Forms documentation.
- An individual Radio button cannot be marked as required. Instead, make a selection required using the RadioGroup. For more information, see the Required field indicator in the Forms documentation.
React examples
Default
With a caption
This is a caption
With a leading visual
In a group of radio buttons
This example uses the RadioGroup component to render a set of radio inputs.
More code examples
See the Radio Storybook stories
Props
Radio
| Name | Required | Description |
|---|---|---|
value | Required | stringA unique value that is never shown to the user |
name | stringRequired for grouping multiple radios | |
checked | booleanModifies true/false value of the native radio | |
defaultChecked | booleanSelects the radio by default in uncontrolled mode | |
onChange | (event: React.ChangeEvent) => voidA callback function that is triggered when the input state has been changed | |
disabled | booleanModifies the native disabled state of the native checkbox | |
ref | React.RefObject<HTMLInputElement> | |
as | React.ElementType | |
sx | SystemStyleObject |