Radio
Radio buttons let people select one option from a set of options
- Use radio buttons (not toggles) when only one item can be selected from a list
- Label should be scannable
- Selected items are more prominent than unselected items
Example
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Usage
Alternate selection controls
Radio buttons are one of several selection controls, which allow users to make choices such as selecting options or switching settings on or off.
Switches and checkboxes are alternative selection controls that can be used to change settings or preferences.
On this page
import { RadioGroup, Radio, RadioParts } from '@cerberus/react'Usage
The Radio component is a controlled component that can be used to select one option from a set. Simply wrap the Radio components in a RadioGroup component to create a group of radio buttons.
Orientation
The RadioGroup component supports two orientations: horizontal, and vertical. The default orientation is horizontal.
Sizes
The Radio component supports two sizes: sm, and md. The default size is sm.
Primitives
You can utilize the primitive components to customize the radio.
| Component | Description |
|---|---|
| RadioGroupRoot | The context provider for the RadioGroup parts |
| RadioGroupLabel | The label of the radio |
| RadioGroupIndicator | The indicator of the radio state |
| RadioGroupItem | The container of the label and control of the radio |
| RadioGroupItemText | The label for a single radio |
| RadioGroupItemControl | The visual input of a single radio |
| RadioGroupItemHiddenInput | The native input for the radio |
API
Props
RadioGroup
The RadioGroup component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| orientation | horizontal | This orientation of the group. |
The RadioGroup component also accepts all the props of the RadioGroupRoot primitive props
Radio
The Radio component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| size | sm | The size of the radio. |
The Radio component also accepts all the props of the RadioGroupItem primitive props
Parts
The RadioParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The RadioGroupRoot component which is the Provider for the family. |
| Label | The RadioGroupLabel component which displays the label and "required" notice. |
| Indicator | The RadioGroupIndicator component which displays based on the checked state. |
| Item | The RadioGroupItem component which is the container to a single radio item. |
| ItemText | The RadioGroupItemText component which is the label of the radio. |
| ItemControl | The RadioGroupItemControl component which is the visual field. |
| HiddenInput | The RadioGroupHiddenInput component which displays the native input. |
On this page
Use Cases
- Users should be able to:
- Navigate to a radio button list item with assistive technology
- Select radio button
- Get appropriate feedback based on input type documented under Interaction & style
Interaction & Style
The radio button has two states: selected and unselected. There's a brief but important interaction where the user changes the states of the buttons by selecting an option.
Users should be able to select either the text label or the radio button to select an option. Once selected, there is always one radio button selected in the group, users can change their selection but they can't unselect.
Initial Focus
When in groups: Tab moves focus into the group's selected radio or the first radio if none are selected. Shift + Tab moves focus tothe last radio if none are selected
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | To move to the next element in a group |
| Shift + Tab | To select the last radio button item in a group |
| Arrows | To move up or down, between radio options and make a selection |
| Space | To select a focused radio option not yet selected |
Labeling Elements
If the UI text is correctly linked to the radio button, assistive tech (such as a screenreader) will read the UI text followed by the component’s role.
The accessibility label for a group of radio buttons is “radio group.”
The accessibility label for an individual radio button is typically the same as its adjacent text label.
On this page