Radio buttons allow the user to select one option from a set while seeing all available options.
Radio buttons are typically part of a group, where only one radio button in a
group can be selected at one time. Use the same
to group multiple radio
1) Default Radio Buttons
2) Stacked Radio Buttons
Inline radio buttons can sometimes be difficult to scan. Users may find it difficult to differentiate which label the option belongs to: the one before or after the option.
Note: Arranging the radio buttons in a vertical block (seen below) helps to eliminate possible confusion.
When to use
Radio buttons should be used:
- When users can only select one item from a list of options.
Radio buttons should not be used:
- If you want users to select multiple options.
- Using the checkbox component would be more appropriate.
Having troubles with the guide? Please give us more details and we'll get back to you soon.Chat with the team