Radio
A radio includes a radio input and its label. Radios are used in radio groups that let people select exactly one option from a set.
Also known as:
Radio buttonRadio groupOption buttonChoiceSelectionDiscRadio input
- Overview
- Autocomplete (not built)
- Avatar
- Badge
- Button
- Button Group (not built)
- Card
- Checkbox Group
- Collapsible
- Commentary
- Content
- Date Picker (not built)
- Divider
- Drawer
- Dropdown
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon
- Icon Button
- Illustration
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Menu
- Modal
- Pagination (not built)
- Popover
- Progress Bar (not built)
- Progress Stepper
- Radio
- Radio Group
- Rich Text Editor
- Search Field (not built)
- Select
- Slider (not built)
- Split Button
- Table
- Tabs
- Tag
- Tile
- Tile Grid
- Toast Notification
- Tooltip
- Well
Need to know
- Radios are only used in radio groups to let people select exactly one option from a set.
Visuals
UI Kit
To keep in mind
A radio lets a user choose to select a single item. When used in a Radio Group, a radio lets a user make exactly one selection from a set, which is all visible at the same time.
There must always be more than one radio used together in a radio group.
- Ensure both label and input are clickable to select the radio. That is, use
label
tags that wrap theinput
element or use afor
attribute.
When to use and when not to use
When to use
- Only use radios inside a radio group.
When not to use
- When there’s limited space, consider using a select dropdown instead.
- For settings that are immediately applied, consider using a toggle switch instead.
See also
See also Toggle switch, Checkbox Field
External links
Here are some examples of other existing design systems: