diff --git a/ijs.tree b/ijs.tree index 7673de516..507df770b 100644 --- a/ijs.tree +++ b/ijs.tree @@ -465,7 +465,7 @@ - + diff --git a/images/ui/checkbox/checkbox.png b/images/ui/checkbox/checkbox.png new file mode 100644 index 000000000..ec816b973 Binary files /dev/null and b/images/ui/checkbox/checkbox.png differ diff --git a/images/ui/checkbox/checkbox_dark.png b/images/ui/checkbox/checkbox_dark.png new file mode 100644 index 000000000..953483177 Binary files /dev/null and b/images/ui/checkbox/checkbox_dark.png differ diff --git a/images/ui/checkbox/checkbox_download_status.png b/images/ui/checkbox/checkbox_download_status.png new file mode 100644 index 000000000..95abce1a7 Binary files /dev/null and b/images/ui/checkbox/checkbox_download_status.png differ diff --git a/images/ui/checkbox/checkbox_download_status_dark.png b/images/ui/checkbox/checkbox_download_status_dark.png new file mode 100644 index 000000000..9b848fb0d Binary files /dev/null and b/images/ui/checkbox/checkbox_download_status_dark.png differ 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_three_state.png b/images/ui/checkbox/checkbox_three_state.png new file mode 100644 index 000000000..03bb0ebc8 Binary files /dev/null and b/images/ui/checkbox/checkbox_three_state.png differ diff --git a/images/ui/checkbox/checkbox_three_state_dark.png b/images/ui/checkbox/checkbox_three_state_dark.png new file mode 100644 index 000000000..e081cdaef Binary files /dev/null and b/images/ui/checkbox/checkbox_three_state_dark.png differ diff --git a/images/ui/checkbox/checkbox_when_not_to_use_1.png b/images/ui/checkbox/checkbox_when_not_to_use_1.png new file mode 100644 index 000000000..5eeb2c6ad Binary files /dev/null and b/images/ui/checkbox/checkbox_when_not_to_use_1.png differ 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_dark.png b/images/ui/checkbox/checkbox_when_not_to_use_1_dark.png new file mode 100644 index 000000000..289bf9e2b Binary files /dev/null and b/images/ui/checkbox/checkbox_when_not_to_use_1_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-1.png b/images/ui/checkbox/checkbox_when_not_to_use_2-1.png new file mode 100644 index 000000000..42644e934 Binary files /dev/null and b/images/ui/checkbox/checkbox_when_not_to_use_2-1.png differ diff --git a/images/ui/checkbox/checkbox_when_not_to_use_2.png b/images/ui/checkbox/checkbox_when_not_to_use_2.png new file mode 100644 index 000000000..6b23628cf Binary files /dev/null and b/images/ui/checkbox/checkbox_when_not_to_use_2.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_correct_dark.png b/images/ui/checkbox/checkbox_when_not_to_use_2_correct_dark.png new file mode 100644 index 000000000..4267182b1 Binary files /dev/null and b/images/ui/checkbox/checkbox_when_not_to_use_2_correct_dark.png differ diff --git a/images/ui/checkbox/checkbox_when_not_to_use_2_dark.png b/images/ui/checkbox/checkbox_when_not_to_use_2_dark.png new file mode 100644 index 000000000..42644e934 Binary files /dev/null and b/images/ui/checkbox/checkbox_when_not_to_use_2_dark.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/images/ui/checkbox/checkbox_when_not_to_use_2_incorrect_dark.png b/images/ui/checkbox/checkbox_when_not_to_use_2_incorrect_dark.png new file mode 100644 index 000000000..99f787c02 Binary files /dev/null and b/images/ui/checkbox/checkbox_when_not_to_use_2_incorrect_dark.png differ diff --git a/images/ui/checkbox/checkbox_when_not_to_use_3-1.png b/images/ui/checkbox/checkbox_when_not_to_use_3-1.png new file mode 100644 index 000000000..4267182b1 Binary files /dev/null and b/images/ui/checkbox/checkbox_when_not_to_use_3-1.png differ diff --git a/images/ui/checkbox/checkbox_when_not_to_use_3.png b/images/ui/checkbox/checkbox_when_not_to_use_3.png new file mode 100644 index 000000000..c52402f76 Binary files /dev/null and b/images/ui/checkbox/checkbox_when_not_to_use_3.png differ diff --git a/images/ui/checkbox/checkbox_when_not_to_use_3_dark.png b/images/ui/checkbox/checkbox_when_not_to_use_3_dark.png new file mode 100644 index 000000000..4267182b1 Binary files /dev/null and b/images/ui/checkbox/checkbox_when_not_to_use_3_dark.png differ diff --git a/images/ui/checkbox/checkbox_when_to_use.png b/images/ui/checkbox/checkbox_when_to_use.png new file mode 100644 index 000000000..9b85fd1cc Binary files /dev/null and b/images/ui/checkbox/checkbox_when_to_use.png differ diff --git a/images/ui/checkbox/checkbox_when_to_use_1.png b/images/ui/checkbox/checkbox_when_to_use_1.png new file mode 100644 index 000000000..aa848a245 Binary files /dev/null and b/images/ui/checkbox/checkbox_when_to_use_1.png differ diff --git a/images/ui/checkbox/checkbox_when_to_use_1_dark.png b/images/ui/checkbox/checkbox_when_to_use_1_dark.png new file mode 100644 index 000000000..f1e86ae48 Binary files /dev/null and b/images/ui/checkbox/checkbox_when_to_use_1_dark.png differ diff --git a/images/ui/checkbox/checkbox_when_to_use_2.png b/images/ui/checkbox/checkbox_when_to_use_2.png new file mode 100644 index 000000000..bbdbbf150 Binary files /dev/null and b/images/ui/checkbox/checkbox_when_to_use_2.png differ diff --git a/images/ui/checkbox/checkbox_when_to_use_2_dark.png b/images/ui/checkbox/checkbox_when_to_use_2_dark.png new file mode 100644 index 000000000..a79f09dd6 Binary files /dev/null and b/images/ui/checkbox/checkbox_when_to_use_2_dark.png differ diff --git a/images/ui/checkbox/checkbox_when_to_use_3.png b/images/ui/checkbox/checkbox_when_to_use_3.png new file mode 100644 index 000000000..1da094a32 Binary files /dev/null and b/images/ui/checkbox/checkbox_when_to_use_3.png differ diff --git a/images/ui/checkbox/checkbox_when_to_use_3_dark.png b/images/ui/checkbox/checkbox_when_to_use_3_dark.png new file mode 100644 index 000000000..c9a4fdfc7 Binary files /dev/null and b/images/ui/checkbox/checkbox_when_to_use_3_dark.png differ diff --git a/images/ui/checkbox/checkbox_when_to_use_dark.png b/images/ui/checkbox/checkbox_when_to_use_dark.png new file mode 100644 index 000000000..20139b576 Binary files /dev/null and b/images/ui/checkbox/checkbox_when_to_use_dark.png differ diff --git a/images/ui/checkbox/checkbox_writing_1_correct.png b/images/ui/checkbox/checkbox_writing_1_correct.png new file mode 100644 index 000000000..4f1d773f9 Binary files /dev/null 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 new file mode 100644 index 000000000..547c6857d Binary files /dev/null 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 new file mode 100644 index 000000000..9541f815c Binary files /dev/null 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 new file mode 100644 index 000000000..d2170b068 Binary files /dev/null and b/images/ui/checkbox/checkbox_writing_1_incorrect_dark.png differ diff --git a/images/ui/checkbox/checkbox_writing_2_correct-1.png b/images/ui/checkbox/checkbox_writing_2_correct-1.png new file mode 100644 index 000000000..a45793ea2 Binary files /dev/null and b/images/ui/checkbox/checkbox_writing_2_correct-1.png differ diff --git a/images/ui/checkbox/checkbox_writing_2_correct.png b/images/ui/checkbox/checkbox_writing_2_correct.png new file mode 100644 index 000000000..6c50fda00 Binary files /dev/null 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 new file mode 100644 index 000000000..231300308 Binary files /dev/null and b/images/ui/checkbox/checkbox_writing_2_correct_dark.png differ diff --git a/images/ui/checkbox/checkbox_writing_2_incorrect-1.png b/images/ui/checkbox/checkbox_writing_2_incorrect-1.png new file mode 100644 index 000000000..916dc10b8 Binary files /dev/null and b/images/ui/checkbox/checkbox_writing_2_incorrect-1.png differ diff --git a/images/ui/checkbox/checkbox_writing_2_incorrect.png b/images/ui/checkbox/checkbox_writing_2_incorrect.png new file mode 100644 index 000000000..275773017 Binary files /dev/null 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 new file mode 100644 index 000000000..aba293bae Binary files /dev/null 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/Components.topic b/topics/ui/Components.topic index 60f991e16..8fa1323e1 100644 --- a/topics/ui/Components.topic +++ b/topics/ui/Components.topic @@ -22,7 +22,7 @@ An icon placed inside an input control. - + Use checkboxes for yes/no choices or for selecting several items in a group. diff --git a/topics/ui/controls/checkbox.md b/topics/ui/controls/checkbox.md deleted file mode 100644 index f97bbf1cd..000000000 --- a/topics/ui/controls/checkbox.md +++ /dev/null @@ -1,192 +0,0 @@ - - -# Checkbox - -UI guidelines on using checkboxes. - - - -**Implementation:** [`JCheckBox`](https://docs.oracle.com/javase/tutorial/uiswing/components/button.html), [`JBCheckBox`](%gh-ic%/platform/platform-api/src/com/intellij/ui/components/JBCheckBox.java) - - - -![](checkbox_example.png){width=166} - -## When to use - -Use checkboxes for yes/no choices or for selecting several items in a group. - -Do **not** use checkboxes if: - -* Only one option in a group can be selected. Use a [radio button group](radio_button.md) instead. -* The behavior in the "off" state is unclear from the checkbox label. Use two radio buttons instead and label them accordingly. - ![](when_to_use.png){width=365} -* With the checkbox, it is unclear how the setting works if it’s unchecked. With radio buttons, both states are labeled clearly.* - -## How to use - -### Label - -A label accompanies each checkbox and is placed next to it. - -![](checkbox_label.png){width=161} - -If a label is long, split it into two lines. Use HTML formatting for that. - -![](label_twoline.png){width=331} - - - - -```kotlin -checkBox( - """Insert selected suggestion by pressing space, dot,
- or other context-dependent keys""") -``` - -
- - -```java -new JCheckBox( - "Insert selected suggestion by pressing space, dot,
" + - "or other context-dependent keys"); -``` - -
-
- -Avoid labels that take more than two lines. See recommendations on writing concise labels below. - -If a checkbox appears in a table, place the label into the column header and do not repeat it on every row. - -![](checkbox_table.png){width=347} - -**Implementation**: Checkboxes are rendered in tables with [`BooleanTableCellRenderer`](%gh-ic%/platform/core-ui/src/ui/BooleanTableCellRenderer.java) -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`. - -```java -TableColumn column = table.getColumnModel().getColumn(COLUMN_INDEX); -column.setCellEditor(JBTable.createBooleanEditor()); -column.setCellRenderer(new BooleanTableCellRender()); -``` - -### Writing guidelines - -Use sentence-style capitalization. - -Do not use ending punctuation. - -Use the imperative form of verbs. - -![](label_short.png){width=350} - -Do not use negation in labels as it complicates understanding. -**Exception**: "Do not show again" checkbox. - -![](label_answeryes.png){width=224} - -Make labels short and intelligible — see [Writing short and clear](writing_short.md). - -### Three-state checkbox - -In a group of options, use the parent checkbox to show the status of its children. - -![](indeterminate_checkbox.png){width=542} - -*The parent checkbox in checked, indeterminate and unchecked states* -**Implementation**: The three-state checkbox is represented by the [`ThreeStateCheckBox`](%gh-ic%/platform/util/ui/src/com/intellij/util/ui/ThreeStateCheckBox.java) -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_status.png){width=358} - -*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`](%gh-ic%/platform/lang-impl/src/com/intellij/profile/codeInspection/ui/table/ThreeStateCheckBoxRenderer.java) -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`. - -## Placement - -If a checkbox depends on another control, e.g., an input field, follow the rules for [dependent controls](layout.md#dependent-controls). Otherwise, follow the rules for [independent controls](layout.md#independent-controls). - - diff --git a/topics/ui/controls/checkbox.topic b/topics/ui/controls/checkbox.topic new file mode 100644 index 000000000..9b081f539 --- /dev/null +++ b/topics/ui/controls/checkbox.topic @@ -0,0 +1,209 @@ + + + + + + + Checkbox + + UI guidelines on using checkboxes. + +

+ Implementation: + JCheckBox, + JBCheckBox +

+
+ A preview of checkboxes in different states + +

Use checkboxes for yes/no choices or for selecting several items in a group:

+ An example of a checkbox group with two selected options +
+ +

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

+ + + + + +
+ Incorrect + A radio button group with only one selected option possible + + Correct + Two radio buttons with clear labels +
+

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

+ + + + + +
+ Incorrect + A radio button group with only one selected option possible + + Correct + Two radio buttons with clear labels +
+
+ + +

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

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

+ A table with checkboxes where the label is placed into the column header + + 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()); + + +
+ + +

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

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

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

+ Follow the guidelines for checkboxes and radio buttons layout. +

+
+
diff --git a/topics/ui/controls/toggle_button.md b/topics/ui/controls/toggle_button.md index 2f18aa210..07ba9685e 100644 --- a/topics/ui/controls/toggle_button.md +++ b/topics/ui/controls/toggle_button.md @@ -55,7 +55,7 @@ If the setting is in a tree or menu, use the toggle button label to specify wher ![](label_menu_se.png){width=676 style=block} *The same setting in search results; separate the first menu level with a vertical bar, and separate others with a colon* -Refer to [checkbox](checkbox.md) for writing checkbox labels and menu labels. +Refer to [checkbox](checkbox.topic) for writing checkbox labels and menu labels. [//]: # (TODO: and [menu](menu_list.md))