Radio buttons

Radio buttons allow users to select only one item from a list of mutually exclusive items.

Component data

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Forms


Configure: select the dropdowns below to display the variety of options that radio buttons support.

Example radio buttons



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:


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.


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.