Radio group Preview

Radio groups let people select a single item from a short list.

Use radio groups in layouts that offer enough space to list up to five options, or if it's important to view all options at once. If there isn't enough space, try a dropdown instead. If you need to let people select more than one option, try checkboxes. To let them immediately turn a setting on or off, try a switch.

Behavior

Radio groups should present a selected option by default. The default option should be placed first and should be the most logical assumption. Remaining options should be listed in a logical order, for example from most to least secure, or simplest to most difficult.

Layout

Radio groups can be aligned vertically or horizontally. When horizontally aligned, the label can appear next to or under the input.

Vertical alignment

Vertically aligned radios allow for better scannability and localization.

Horizontal alignment

Horizontally aligned radios work well in crowded layouts to save space.

Accessibility

Include intuitive labels with radio groups.

When tabbing, focus will fall on the first option if no options are selected. If there is a selection, focus will fall on that option first.

Content

Keep individual radio labels as concise and descriptive as possible. Use fragments instead of full sentences. If long labels can’t be avoided, wrap text onto the next line. Never truncate radio text with an ellipsis. Use sentence case with no end punctuation.