Radio group Preview

Radio groups let people select a single item from a short list. Use them 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, use checkboxes. To let them immediately turn a setting on or off, try a switch.




Default selection

Present a selected option in radio groups by default. The default selection should be placed first and should be the most logical response. Remaining options should be listed in a logical order. For more information, see the Content section.

Color overview


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

Vertical alignment

Vertical alignment (preferred)

Vertically aligned radios allow for better scannability and localization.

Vertical alignment

Horizontal alignment

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


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.


Keep labels short and clear

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

Vertical alignment
Vertical alignment

Skip the period in radio labels. For the label that introduces the radio group, don’t end with a colon. For more info, go to Periods in the Microsoft Writing Style Guide.

Use sentence style capitalization—only capitalize the first word. For more info, go to Capitalization in the Microsoft Writing Style Guide.