Updated phrasing to improve clarity and consistency, emphasizing when to use checkboxes for two opposing choices. No functional or structural changes were made.
4.6 KiB
Radio Button
UI guidelines on using radio buttons.
Implementation: JBRadioButton
{width=706}
When to use
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 selected
Use a group of checkboxes instead.
Binary Yes/No Options
For only two opposing yes/no options, use a checkbox instead.
Correct![]() |
Incorrect![]() |
5 and more options
If 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:
Correct![]() |
Incorrect![]() |
Use dropdown
Consider 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:
{width=706} The automatic updates setting consists of a checkbox, three lengthy-labeled options in a dropdown and a button.
How to use
Label
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 guidelines
Use sentence-style capitalization.
Do not use ending punctuation.
Use the imperative form of verbs.
Do not use negation in labels as it complicates understanding.
Correct![]() |
Incorrect![]() |
Make labels short and intelligible — see Writing short and clear text.
Group label
Always 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 placement
If 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.