Radio button

ECT approvedUpdated May 21, 2026

Description

A radio button is a simple visual indicator with a selected and unselected state.
It must be used in a group. A user can select 1 radio button only.
To use radio buttons for progressive disclosure, show top-level controls first, and then show more controls based on the user’s selection.

Warning

Choosing the right component For choosing a single option from a short list, use Toggle button - very short text label, bold visuals Radio button - longer label, still a single line Tile select - more space for richer content For choosing one or more options from a short list, use Checkbox. For choosing a single option from a long list, use Dropdown.

Anatomy

Anatomy

Size

The radio button is available in S size, M size and L sizes.
Choose the most suitable size based on context, space, and screen size.

State

Warning

States are visual indicators used to communicate a component’s interaction status. Learn more about commonly used component states in our General specs

Component-specific states

A radio button is unselected by default.

Default

Selected

Group orientation

Vertical

Horizontal

Variations

With icon

With secondary text

Progressive

Dos and don'ts

Don't

Technical example

Radio button component implemented in Carbon.

Requirements

Users should be able to:

Select one item from a group of mutually exclusive options.
Navigate between radio buttons using assistive technology.
Understand which item is currently selected.

Interactions

Radio buttons should be used where only one item in a group of options can be selected. Where multiple items can be selected, use a checkbox group.

Keyboard interactions

Tab. Moves focus from the previous interactive element on the page to the first radio button in the group.
Pressing ‘tab’ from any of the radio buttons moves focus to the next interactive element on the page.
Arrow up and Arrow down. Moves focus between buttons in the group when positioned vertically.
Arrow left and Arrow right. Moves focus between buttons in the group when positioned horizontally.
Enter. Submits the form based on the selected option.
The option with keyboard focus is the selected option.

Design considerations

Make sure radio buttons are styled to look like radio buttons, so that users are not confused about how many options they can select.
Make sure labels are near to radio buttons, so users can easily track options on the screen.

Development considerations

Radio buttons should be grouped within a fieldset so screen reader users understand that the buttons are related to each other.
An overall label should be given to the radio button group using a legend, allowing users to clearly understand the purpose of the group.
Make sure the legend is a direct child of the fieldset element to avoid the creation of invalid code.
Each radio button should have a clear, descriptive label, associated with it using the for attribute.
Use the checked attribute to communicate to screen reader users which option has been selected.

Date	Changes
10 October 2025	Added Do's and Don'ts on how to use progressively revealed inputs.Added 24px invisible hit area that sits underneath both the label and checkbox area on small sizes.Marked as ECT approved.
August 2025	Updated guidance on the accessibility tab.
September 2024	New version created. Previous versions archived in the frozen Web and Product design system.