Radio Button Component

Radio button is used when users have to select only one from multiple options.

Radio Button Variations

Horizontal When the list options are placed horizontally side by side to another.
Vertical When the list options are placed vertically on top of another.

Guideline

• Sort options in a logical order from most likely to least likely to be selected. Top to bottom for vertical list radio, left to right for horizontal list radio.
• Make the first option to be the default select option.
• Labels should be concise and provide clear context. It should be no more than 3 words.

When to use

• When the user has to choose only one option.

When not to use

• When the user is able to choose more than one option. Consider using a checklist.
• When there are 5 or more options. Consider using dropdown for it.

Code