Radio buttons
Radio buttons allow users to select only one item from a list of mutually exclusive items.
Component data
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files | coc-card-item.js
Functional grouping: Forms
Demo
Configure: select the dropdowns below to display the variety of options that radio buttons support.
Code
Responsive preview
Usage best practices
Lay out the list of options vertically, with one item per line. If a horizontal layout is required, space out each item (button control and the label) very clearly.
When users click a non-selected radio button, that will automatically deselect whatever other button was previously selected in the list.
Consider using radio buttons when:
- there are two or more choices that are mutually exclusive
- it is best for users to see all available options at once
- users are expected to make only one selection
Usage examples:
- select a gender
- "yes/no" answers
- change settings
Related components:
Do
Ensure list options are comprehensive and in logical order. If it's impossible to be comprehensive, offer an "other" option with a type-in field.
Ensure button labels and descriptions are clear and easy to understand.
Always have a default option selected that's aligned with user's expectations or makes the best suggestion.
Ensure the button control and label area are large enough for mouse clicking and finger pressing.
Ensure selections are adequately spaced for touch screens.
Don't
Do not use radio buttons when more than one item are expected to be selected.
Do not list options that are not mutually inclusive such as age 20-30 and age 25-35.