Radio Button

COMPONENT GUIDE

Explore behaviors before defining the interface.

Quick guide for designers

Always consider the context of the application, even when the guidance follows a standard pattern. Interaction design documents intent. Behavior must be verified in the implementation.

When to use

Use when a person must choose one option within a group.

What to draw

Show the group name, labels, and selected, unselected, focus, and disabled states.

How it behaves

Selecting an option clears the previous selection. Tab enters the group; arrows navigate and select options. Clicking again does not clear the selected option.

What to document in Figma

Define the options belonging to the same group and indicate any initial selection.

How to review

Check whether the purpose and states are clear on small and large screens and with zoom. Verify documented behavior in the implementation, including keyboard and screen reader use where applicable.

Full guidance

Interaction Design

Questions to ask when designing interactive components of type Radio Button.

Important:
Depending on the context in which you build your components, there may be further questions, and some listed here may not be necessary. Assess each case individually.

Designing for "no interaction"

Before interacting, can you tell that this is a single choice within a group?
Does the group label clearly communicate the question or decision?
Can you visually identify which option is selected?

Designing for mouse use (any pointing device)

Is there visual feedback when hovering over the radio button or its label?
Does clicking the label select the corresponding option?
Does selecting an option deselect the other options in the group?

Designing for gesture use

Does the touch target include the associated label?
Does tapping an option make it the only selected option in the group?
Is the touch area comfortable on small screens?

Designing for keyboard use (any non-pointing device)

TAB move focus to the selected option, or the first option when none is selected?
Do the arrow keys move focus and change selection within the group?
SPACE select the focused option?

Designing for screen reader use

Is the group label announced?
Is each option announced as a radio button?
Is the selected or unselected state announced?
Is the option's position in the group perceptible when supported?

Interaction methods

Possible interaction methods for components of type Radio Button.

Important:
Only the main methods are listed here. Custom components require further study.

Mouse interaction (any pointing device)

Clicking the control or label selects the option.
Selecting an option deselects the other options sharing the same group name.
A selected option is not deselected by a second click.

Keyboard interaction (any non-pointing device)

TAB enters the group once.
arrow keys navigate and select options in the group.
SPACE selects the focused option when needed.

Keyboard (or gesture) interaction + screen reader

The group must have an accessible name, preferably using fieldset and legend.
Each option must have a programmatically associated label.
The selected state should be exposed semantically.

Gherkin

BDD (Behavior-Driven Development) methodology focusing on three pillars: User Stories, Acceptance Criteria, and Gherkin Syntax (Given, When, Then).

Scenario: Given that I am on a page containing radio buttons

Keyboard navigation

WHEN I use the Tab key to move focus to a radio button group
The focus I SEE is strongly indicated visually on the selected option or the first option
THEN, when I use the Space
I SEE the focused option selected
THEN, when I use the arrow keys
I SEE selection change within the group

Desktop screen reader

When I use a screen reader on a computer (NVDA, JAWS, VoiceOver) and move focus to the component
- I HEAR the group's label and purpose.
- I HEAR that each item is a radio option.
- I HEAR its current state, such as selected or unselected.
THEN, when I activate or change the component
I HEAR or perceive that its corresponding state, value, content, or action has been updated.

Mobile screen reader

WHEN I use a screen reader on a phone (TalkBack, VoiceOver) and swipe to focus the component, the following happens:
- I HEAR the group's label and purpose.
- I HEAR that each item is a radio option.
- I HEAR its current state, such as selected or unselected.
THEN, when I double-tap or use the appropriate gesture to activate the component
I HEAR or perceive that its corresponding state, value, content, or action has been updated.

Considerations

Considerations for components of type Radio Button.

Use radio buttons when only one option in the group can be chosen.
Do not place interactive controls inside radio labels without a clear focus and reading strategy.
The same name attribute is essential for creating the group in native HTML.

References

Additional references for components of type Radio Button.

Important:
Most references are on the course platform alongside the lessons cited in this material.

Disclaimer:
The links listed here are a curated collection of references where you can find implemented components, rather than recommendations. There is no unified implementation format and no guarantee that these links follow every design pattern. Direct questions to the teams responsible for the linked materials. Before copying a model, remember that all materials are constantly updated and that patterns, particularly proprietary ones, may change.