diff --git a/images/ui/checkbox/checkbox_when_not_to_use_1_correct.png b/images/ui/checkbox/checkbox_when_not_to_use_1_correct.png new file mode 100644 index 000000000..5eeb2c6ad Binary files /dev/null and b/images/ui/checkbox/checkbox_when_not_to_use_1_correct.png differ diff --git a/images/ui/checkbox/checkbox_when_not_to_use_1_correct_dark.png b/images/ui/checkbox/checkbox_when_not_to_use_1_correct_dark.png new file mode 100644 index 000000000..289bf9e2b Binary files /dev/null and b/images/ui/checkbox/checkbox_when_not_to_use_1_correct_dark.png differ diff --git a/images/ui/checkbox/checkbox_when_not_to_use_1_incorrect.png b/images/ui/checkbox/checkbox_when_not_to_use_1_incorrect.png new file mode 100644 index 000000000..0bc449898 Binary files /dev/null and b/images/ui/checkbox/checkbox_when_not_to_use_1_incorrect.png differ diff --git a/images/ui/checkbox/checkbox_when_not_to_use_1_incorrect_dark.png b/images/ui/checkbox/checkbox_when_not_to_use_1_incorrect_dark.png new file mode 100644 index 000000000..221ae1d19 Binary files /dev/null and b/images/ui/checkbox/checkbox_when_not_to_use_1_incorrect_dark.png differ diff --git a/images/ui/checkbox/checkbox_when_not_to_use_2_correct.png b/images/ui/checkbox/checkbox_when_not_to_use_2_correct.png new file mode 100644 index 000000000..c52402f76 Binary files /dev/null and b/images/ui/checkbox/checkbox_when_not_to_use_2_correct.png differ diff --git a/images/ui/checkbox/checkbox_when_not_to_use_2_incorrect.png b/images/ui/checkbox/checkbox_when_not_to_use_2_incorrect.png new file mode 100644 index 000000000..0ab993d9f Binary files /dev/null and b/images/ui/checkbox/checkbox_when_not_to_use_2_incorrect.png differ diff --git a/topics/ui/controls/checkbox.topic b/topics/ui/controls/checkbox.topic index 83f0dd523..90f589057 100644 --- a/topics/ui/controls/checkbox.topic +++ b/topics/ui/controls/checkbox.topic @@ -22,20 +22,30 @@ An example of a checkbox group with two selected options -

Use radio button instead if:

+

If only one option in a group can be selected, use radio button:

+ - +
- A radio button group with only one selected option possible + Incorrect + A radio button group with only one selected option possible + + Correct + Two radio buttons with clear labels Only one option in a group can be selected.
+

If the behavior in the "off" state is unclear from the checkbox label, use two radio buttons instead + and label them accordingly:

+ -
- Two radio buttons with clear labels + Incorrect + A radio button group with only one selected option possible The behavior in the "off" state is unclear from the checkbox label. Use two radio buttons instead - and label them accordingly + + Correct + Two radio buttons with clear labels
@@ -55,38 +65,41 @@ - - - - checkBox( - """<html>Insert selected suggestion by pressing space, dot,<br/> - or other context-dependent keys</html>""") - - - - - new JCheckBox( - "<html>Insert selected suggestion by pressing space, dot,<br/>" + - "or other context-dependent keys</html>"); - - - - + +

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

- - - - - -
- CorrectA correct checkbox with the label on the right - - IncorrectAn incorrect checkbox with the label on the left -
+ + + + + +
+ CorrectA correct checkbox with the label on the right + + IncorrectAn incorrect checkbox with the label on the left +
+ + + + + checkBox( + """<html>Insert selected suggestion by pressing space, dot,<br/> + or other context-dependent keys</html>""") + + + + + new JCheckBox( + "<html>Insert selected suggestion by pressing space, dot,<br/>" + + "or other context-dependent keys</html>"); + + + +

If a checkbox appears in a table, place the label into the column header and do not repeat it on every row:

@@ -107,24 +120,20 @@ -

In a group of options, use the parent checkbox to show the status of its children:

+ +

In a group of options, use the parent checkbox to show the status of its children. The state of the parent checkbox can be checked, indeterminate or unchecked. When a user clicks an indeterminate checkbox for the first time, the whole group becomes checked. The second click unchecks the whole group. +

Different states for a parent checkbox: checked, indeterminate, and unchecked -

The parent checkbox in checked, indeterminate and unchecked states.

The three-state checkbox is represented by the ThreeStateCheckBox class which represents its state with the ThreeStateCheckBox.State enum containing SELECTED, NOT_SELECTED, DONT_CARE states. -

When the user clicks an indeterminate checkbox for the first time, the whole group becomes checked. The - second click unchecks the whole group.

-

An indeterminate checkbox can also show the download status. An example with a remote repository:

+ + +

An indeterminate checkbox can also show the download status. In the example below, a remote repository with Repositories "tools-base" and "contrib" are being loaded. When loading is finished, the indeterminate checkbox will be replaced with the checked checkbox if there are commits, or an unchecked checkbox if there are no commits.

Indeterminate checkboxes showing download status -

- Repositories "tools-base" and "contrib" are being loaded. When loading is - finished, the indeterminate checkbox will be replaced with the checked checkbox if there are - commits, or an unchecked checkbox if there are no commits. -

In a table, the three-state checkbox is represented by ThreeStateCheckBoxRenderer that provides both TableCellRenderer and TableEditor. @@ -133,10 +142,10 @@ Otherwise, it becomes SELECTED for Boolean.TRUE, and NOT_SELECTED for Boolean.FALSE.

 + - -
  • Use sentence-style capitalization: + Use sentence-style capitalization:
    @@ -149,8 +158,7 @@
    -
    • -
  • Do not use ending punctuation: + Do not use ending punctuation:
    @@ -163,8 +171,7 @@
    -
    • -
  • Use the imperative form of verbs: + Use the imperative form of verbs:
    @@ -177,8 +184,7 @@
    -
    • -
  • Do not use negation in labels as it complicates understanding: + Do not use negation in labels as it complicates understanding:
    @@ -192,16 +198,15 @@
    Exception: Do not show again checkbox. -
    • -
  • Make labels short and intelligible. See Writing short and clear. -
    • -     + + Make labels short and intelligible. See Writing short and clear.     - + +

    Follow

    If a checkbox depends on another control, for example, an input field, follow the rules for dependent controls. Otherwise, follow the rules for independent controls.

     - \ No newline at end of file +