Radio buttons Design system

Makes single selection clear and easy to operate.

6 checks · 2 content groups

Checklist contents

Review progress

Structure and meaning

Compare information and presentation in context of use.

Ask a general questionLabel the group so users know what they're selecting.Move the selection with the arrow keys and then tap the label. Only one option is chosen; The group name and description should make it clear what the choice affects.Example The “Delivery method” group has “Standard” and “Fast”; Each label lists the estimated time and fee, with one selection at a time.Distinguish each optionUse specific labels and add explanations when choices have subtle differences.Each choice needs to easily compare the same attribute; Explain the costs or consequences immediately below the relevant option.Only select one itemKeep exclusions consistent and only pre-select when there's a good reason.Do not pre-select when the user needs to make a conscious decision; If there is a default, clearly state the reason and still allow changes before sending.

Interaction and usability

Try the operation, change the status and continue working.

Let it touch the label tooAssociate the label with the select button and keep the activation area wide enough.Click on both the appropriate label and description; Keep enough distance so that pressing this option does not hit the next option.Can be moved using the keyboardSupports Tab to groups and arrow keys between selections in familiar behavior.Groups only need an entry point using Tab and using arrows to change items; Avoid giving each circle a separate Tab stage.Show all statusesDistinguish between unselected, selected, focused and disabled without relying solely on color.Unusable items require accessible reasons; The radio group with an error must attach a notice to the whole question, not just one item.

Progress is saved automatically in this browser.

GUIDANCE

How to review

Check for single selection in a group

Move the selection with the arrow keys and then tap the label. Only one option is chosen; The group name and description should make it clear what the choice affects.

EXAMPLES

Usage examples

Choose delivery method

The “Delivery method” group has “Standard” and “Fast”; Each label lists the estimated time and fee, with one selection at a time.

Radio buttons Design system

Structure and meaning

Interaction and usability

How to review

Check for single selection in a group

Usage examples

Choose delivery method

The group chooses an option

Status of selection

Find a checklist

No checklists found

Radio buttons Design system

Structure and meaning

Interaction and usability

How to review

Check for single selection in a group

Usage examples

Choose delivery method

Variants and use cases

The group chooses an option

Status of selection