Use a radio button group to choose one option from 2 to 4 mutually exclusive options.
When not to use Several options in a group can be selectedUse a group of checkboxes instead.
Binary Yes/No OptionsFor only two opposing yes/no options, use a checkbox instead.
5 and more optionsIf the options have short labels, use a segmented button. Or, if the options can be represented on an axis, such as a time delay, use a slider instead.
For other cases with 5 or more options use a drop-down list:
Use dropdownConsider using a drop-down list if:
The screen space is limited.
The option might be used less often than other options on the screen.
There are other drop-down lists in the same group of UI components. A radio button group is more noticeable than a drop-down list, so it will look like a more important setting.
There is a combination of several UI components for one setting:
The automatic updates setting consists of a checkbox, three lengthy-labeled options in a dropdown and a button.To implement this, use HTML formatting:
radioButton( "<html>Show options before adding<br>to version control</html>")
new JRadioButton( "<html>Show options before adding<br>to version control</html>");
Writing guidelinesUse sentence-style capitalization.
Do not use ending punctuation.
Use the imperative form of verbs.
Do not use negation in labels as it complicates understanding.
Make labels short and intelligible â see Writing short and clear text.
Group labelAlways start a radio button group with a group label. It explains what the options are for.
Use a checkbox or another radio button as a group label if the radio button group needs to be turned on or off.
Use a colon at the end of a group label.
Sizes and placementIf a radio button group depends on another control, e.g., a checkbox, follow the rules for dependent colors. Otherwise, follow the rules for independent colors.
24 January 2025
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4