Last Updated on Sep 29, 2022
Radios are used when there are two or more options and the user must select exactly one option.
- Radios are always used in groups. There shouldn’t be a single radio option.
- Radios can be grouped vertically or horizontally.
Radio Tile Group
If you need a way to show radios in a larger, more visual way, you might want to use a radio tile group. Radio tiles are common in survey questions and forms. Radio tiles are for a list of selections that are mutually exclusive, e.g. answers to survey questions.
The whole tile of a radio group item is clickable and changes when it’s selected. This affordance is to make the options and selections even more clear and obvious.
Do's and Don'ts
Use instead of a select if you have a very small set of options. Usually less than four.
Don’t use if an action has to be executed immediately. Use a switch.
Table of ContentsComponent VariantsDesign PrinciplesDo's and Don'ts