Kampheta a23d0c76ce Refine wording for binary yes/no options in radio buttons.
Updated phrasing to improve clarity and consistency, emphasizing when to use checkboxes for two opposing choices. No functional or structural changes were made.
2025-01-02 16:18:26 +01:00

4.6 KiB

Radio Button

UI guidelines on using radio buttons.

Implementation: JBRadioButton

![](01_Radio Button.png){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.

CorrectA correct example of using a checkbox instead of a radiobutton IncorrectAn incorrect example of using a radiobutton instead of a checkbox

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.

{width=706}

For other cases with 5 or more options use a drop-down list:

CorrectA correct example of using a checkbox instead of a radiobutton IncorrectAn incorrect example of using a radiobutton instead of a checkbox

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

Using links instead of buttons

A label accompanies each checkbox and is placed next to it.

Using links instead of buttons

If a label is long, split it into two lines. Avoid labels that take more than two lines. See recommendations on writing concise labels below.

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.

CorrectA correct example of using a checkbox instead of a radiobutton IncorrectAn incorrect example of using a radiobutton instead of a checkbox

Make labels short and intelligible — see Writing short and clear text.

Group label

{width=706}

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.