Option lists vertically is recommended Vertical positioning of radio buttons is safer and would eliminate common confusions.
- Should radio buttons be horizontal or vertical?
- Can radio buttons be horizontal?
- Should radio buttons be stacked?
- What is a good practice when using radio buttons?
Should radio buttons be horizontal or vertical?
Vertical positioning of radio buttons is safer. Try to lay out your lists vertically, with one choice per line. If you still need a horizontal layout with multiple options per line, make sure to space the buttons and labels so that it's absolutely clear which choice goes with which label.
Can radio buttons be horizontal?
By default, checkboxes and radio buttons are displayed in vertical format. You can change the appearance to be horizontal instead using a Custom CSS Class. The default vertical display is recommended.
Should radio buttons be stacked?
Use radio buttons when the user can choose only one option out of a list. Use these for a small number of discrete elements—avoid long lists of radio buttons (usually no more than 6-8 options). When there are more than two options, stack radio buttons vertically.
What is a good practice when using radio buttons?
Radio buttons are typically used when the user is required to fill in a form, configure settings or complete a survey. They should be used for exclusive selection in a list with two or more options, when all list options need to be visible at the same time.