diff --git a/images/ui/checkbox/checkbox_label_long_correct.png b/images/ui/checkbox/checkbox_label_long_correct.png new file mode 100644 index 000000000..bad83c2ce Binary files /dev/null and b/images/ui/checkbox/checkbox_label_long_correct.png differ diff --git a/images/ui/checkbox/checkbox_label_long_correct_dark.png b/images/ui/checkbox/checkbox_label_long_correct_dark.png new file mode 100644 index 000000000..ea9cff217 Binary files /dev/null and b/images/ui/checkbox/checkbox_label_long_correct_dark.png differ diff --git a/images/ui/checkbox/checkbox_label_long_incorrect.png b/images/ui/checkbox/checkbox_label_long_incorrect.png new file mode 100644 index 000000000..416b1ecb0 Binary files /dev/null and b/images/ui/checkbox/checkbox_label_long_incorrect.png differ diff --git a/images/ui/checkbox/checkbox_label_long_incorrect_dark.png b/images/ui/checkbox/checkbox_label_long_incorrect_dark.png new file mode 100644 index 000000000..a41a3f0b4 Binary files /dev/null and b/images/ui/checkbox/checkbox_label_long_incorrect_dark.png differ diff --git a/images/ui/checkbox/checkbox_label_right_correct.png b/images/ui/checkbox/checkbox_label_right_correct.png new file mode 100644 index 000000000..aa848a245 Binary files /dev/null and b/images/ui/checkbox/checkbox_label_right_correct.png differ diff --git a/images/ui/checkbox/checkbox_label_right_correct_dark.png b/images/ui/checkbox/checkbox_label_right_correct_dark.png new file mode 100644 index 000000000..f1e86ae48 Binary files /dev/null and b/images/ui/checkbox/checkbox_label_right_correct_dark.png differ diff --git a/images/ui/checkbox/checkbox_label_right_incorrect.png b/images/ui/checkbox/checkbox_label_right_incorrect.png new file mode 100644 index 000000000..be3b8cb18 Binary files /dev/null and b/images/ui/checkbox/checkbox_label_right_incorrect.png differ diff --git a/images/ui/checkbox/checkbox_label_right_incorrect_dark.png b/images/ui/checkbox/checkbox_label_right_incorrect_dark.png new file mode 100644 index 000000000..2ea12a649 Binary files /dev/null and b/images/ui/checkbox/checkbox_label_right_incorrect_dark.png differ diff --git a/images/ui/checkbox/checkbox_writing_1_correct.png b/images/ui/checkbox/checkbox_writing_1_correct.png index efc297d23..4f1d773f9 100644 Binary files a/images/ui/checkbox/checkbox_writing_1_correct.png and b/images/ui/checkbox/checkbox_writing_1_correct.png differ diff --git a/images/ui/checkbox/checkbox_writing_1_correct_dark.png b/images/ui/checkbox/checkbox_writing_1_correct_dark.png index 413f0c85d..547c6857d 100644 Binary files a/images/ui/checkbox/checkbox_writing_1_correct_dark.png and b/images/ui/checkbox/checkbox_writing_1_correct_dark.png differ diff --git a/images/ui/checkbox/checkbox_writing_1_incorrect.png b/images/ui/checkbox/checkbox_writing_1_incorrect.png index d3c52ce75..9541f815c 100644 Binary files a/images/ui/checkbox/checkbox_writing_1_incorrect.png and b/images/ui/checkbox/checkbox_writing_1_incorrect.png differ diff --git a/images/ui/checkbox/checkbox_writing_1_incorrect_dark.png b/images/ui/checkbox/checkbox_writing_1_incorrect_dark.png index 6992050b7..d2170b068 100644 Binary files a/images/ui/checkbox/checkbox_writing_1_incorrect_dark.png and b/images/ui/checkbox/checkbox_writing_1_incorrect_dark.png differ diff --git a/images/ui/checkbox/checkbox_writing_2_correct.png b/images/ui/checkbox/checkbox_writing_2_correct.png index 094b0a84f..6c50fda00 100644 Binary files a/images/ui/checkbox/checkbox_writing_2_correct.png and b/images/ui/checkbox/checkbox_writing_2_correct.png differ diff --git a/images/ui/checkbox/checkbox_writing_2_correct_dark.png b/images/ui/checkbox/checkbox_writing_2_correct_dark.png index a45793ea2..231300308 100644 Binary files a/images/ui/checkbox/checkbox_writing_2_correct_dark.png and b/images/ui/checkbox/checkbox_writing_2_correct_dark.png differ diff --git a/images/ui/checkbox/checkbox_writing_2_incorrect.png b/images/ui/checkbox/checkbox_writing_2_incorrect.png index b12aa69cc..275773017 100644 Binary files a/images/ui/checkbox/checkbox_writing_2_incorrect.png and b/images/ui/checkbox/checkbox_writing_2_incorrect.png differ diff --git a/images/ui/checkbox/checkbox_writing_2_incorrect_dark.png b/images/ui/checkbox/checkbox_writing_2_incorrect_dark.png index 916dc10b8..aba293bae 100644 Binary files a/images/ui/checkbox/checkbox_writing_2_incorrect_dark.png and b/images/ui/checkbox/checkbox_writing_2_incorrect_dark.png differ diff --git a/images/ui/checkbox/checkbox_writing_3_correct.png b/images/ui/checkbox/checkbox_writing_3_correct.png new file mode 100644 index 000000000..efc297d23 Binary files /dev/null and b/images/ui/checkbox/checkbox_writing_3_correct.png differ diff --git a/images/ui/checkbox/checkbox_writing_3_correct_dark.png b/images/ui/checkbox/checkbox_writing_3_correct_dark.png new file mode 100644 index 000000000..413f0c85d Binary files /dev/null and b/images/ui/checkbox/checkbox_writing_3_correct_dark.png differ diff --git a/images/ui/checkbox/checkbox_writing_3_incorrect.png b/images/ui/checkbox/checkbox_writing_3_incorrect.png new file mode 100644 index 000000000..d3c52ce75 Binary files /dev/null and b/images/ui/checkbox/checkbox_writing_3_incorrect.png differ diff --git a/images/ui/checkbox/checkbox_writing_3_incorrect_dark.png b/images/ui/checkbox/checkbox_writing_3_incorrect_dark.png new file mode 100644 index 000000000..6992050b7 Binary files /dev/null and b/images/ui/checkbox/checkbox_writing_3_incorrect_dark.png differ diff --git a/images/ui/checkbox/checkbox_writing_4_correct.png b/images/ui/checkbox/checkbox_writing_4_correct.png new file mode 100644 index 000000000..094b0a84f Binary files /dev/null and b/images/ui/checkbox/checkbox_writing_4_correct.png differ diff --git a/images/ui/checkbox/checkbox_writing_4_correct_dark.png b/images/ui/checkbox/checkbox_writing_4_correct_dark.png new file mode 100644 index 000000000..a45793ea2 Binary files /dev/null and b/images/ui/checkbox/checkbox_writing_4_correct_dark.png differ diff --git a/images/ui/checkbox/checkbox_writing_4_incorrect.png b/images/ui/checkbox/checkbox_writing_4_incorrect.png new file mode 100644 index 000000000..b12aa69cc Binary files /dev/null and b/images/ui/checkbox/checkbox_writing_4_incorrect.png differ diff --git a/images/ui/checkbox/checkbox_writing_4_incorrect_dark.png b/images/ui/checkbox/checkbox_writing_4_incorrect_dark.png new file mode 100644 index 000000000..916dc10b8 Binary files /dev/null and b/images/ui/checkbox/checkbox_writing_4_incorrect_dark.png differ diff --git a/topics/ui/controls/checkbox.topic b/topics/ui/controls/checkbox.topic index cac0c0dd2..83f0dd523 100644 --- a/topics/ui/controls/checkbox.topic +++ b/topics/ui/controls/checkbox.topic @@ -25,46 +25,38 @@

Use radio button instead if:

- - + - - - - -
- A radio button group with only one selected option possible + + A radio button group with only one selected option possible Only one option in a group can be selectedOnly one option in a group can be selected.
- Two radio buttons with clear labels + + Two radio buttons with clear labels The behavior in the "off" state is unclear from the checkbox label. Use two radio buttons instead and label them accordingly
- A radio button group displaying the correct way for showing different states of a setting - With the checkbox, it is unclear how the setting works if it’s unchecked. With radio buttons, both - states are labeled clearly -
- - - - - - - - - - -
A checkbox showing the correct way to use a labelA label accompanies each checkbox and is placed next to it.
A checkbox with a long label split into two linesIf a label is long, split it into two lines. Use HTML formatting for that.
+ +

A label accompanies each checkbox and is placed on the right side.

+ + + + + +
+ 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/> @@ -72,7 +64,6 @@ - new JCheckBox( "<html>Insert selected suggestion by pressing space, dot,<br/>" + @@ -80,115 +71,137 @@ -

Avoid labels that take more than two lines. See recommendations on writing concise labels below.

+
+ +

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 +
+
+

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

+ row:

A table with checkboxes where the label is placed into the column header -

- Implementation - : Checkboxes are rendered in tables with + Checkboxes are rendered in tables with BooleanTableCellRenderer and edited with DefaultCellEditor(JCheckBox) implementation. For any column that should be rendered as a checkbox, set both a renderer and editor for consistency. The type of data in the correspondent column of the Table model should either be Boolean or String containing true or false. -

- TableColumn column = table.getColumnModel().getColumn(COLUMN_INDEX); column.setCellEditor(JBTable.createBooleanEditor()); column.setCellRenderer(new BooleanTableCellRender()); +
- -

Use sentence-style capitalization.

-

Do not use ending punctuation.

-

Use the imperative form of verbs

- - - - - - - - - -
-

- Correct -

-
-

- Incorrect -

-
A correct checkbox with the imperative form of the verbAn incorrect checkbox with the declarative form of verb
-

Do not use negation in labels as it complicates understanding.

- Exception: "Do not show again" checkbox. - - - - - - - - - - -
-

- Correct -

-
-

- Incorrect -

-
A correct checkbox without negationAn incorrect checkbox with negation
-

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

-
- -

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

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

- The parent checkbox in checked, indeterminate and unchecked states - Implementation - : 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:

- Indeterminate checkboxes showing download status -

- Repositories "tools-base" and "contrib" are being loaded. When loading is + +

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

+ 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:

+ 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. - -

-

- Implementation - : In a table, the three-state checkbox is represented by ThreeStateCheckBoxRenderer - that provides both TableCellRenderer and TableEditor. - It accepts Boolean type in the column being supplied by the TableModel and - becomes DONT_CARE when the value in the cell is null. - Otherwise, it becomes SELECTED for Boolean.TRUE, and NOT_SELECTED - for Boolean.FALSE. -

+

+ +

In a table, the three-state checkbox is represented by ThreeStateCheckBoxRenderer + that provides both TableCellRenderer and TableEditor. + It accepts Boolean type in the column being supplied by the TableModel and + becomes DONT_CARE when the value in the cell is null. + Otherwise, it becomes SELECTED for Boolean.TRUE, and NOT_SELECTED + for Boolean.FALSE.

+
+
+ + +
  • Use sentence-style capitalization: + + + + + +
    + CorrectA correct checkbox with the imperative form of the verb + + IncorrectAn incorrect checkbox with the declarative form of the verb +
    +
  • +
  • Do not use ending punctuation: + + + + + +
    + CorrectA correct checkbox with the imperative form of the verb + + IncorrectAn incorrect checkbox with the declarative form of the verb +
    +
  • +
  • Use the imperative form of verbs: + + + + + +
    + CorrectA correct checkbox with the imperative form of the verb + + IncorrectAn incorrect checkbox with the declarative form of the verb +
    +
  • +
  • Do not use negation in labels as it complicates understanding: + + + + + +
    + CorrectA correct checkbox with the imperative form of the verb + + IncorrectAn incorrect checkbox with the declarative form of the verb +
    + Exception: Do not show again checkbox. +
  • +
  • Make labels short and intelligible. See Writing short and clear. +
  • +
    -

    If a checkbox depends on another control, e.g., an input field, follow the rules for 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