diff --git a/source/components/checkbox.rst b/source/components/checkbox.rst --- a/source/components/checkbox.rst +++ b/source/components/checkbox.rst @@ -1,11 +1,11 @@ -Check box -========= +Checkbox +======== Purpose ------- -A *check box* is a control that permits the user to make multiple -selections from a number of options. Check boxes are used to toggle an +A *checkbox* is a control that permits the user to make multiple +selections from a number of options. Checkboxes are used to toggle an option on or off, or to select or deselect an item. Users make a decision between two clearly opposite choices, e.g. 'on vs. off', 'apply vs. don't apply', 'show vs. hide'. @@ -19,7 +19,7 @@ Is this the right control ~~~~~~~~~~~~~~~~~~~~~~~~~ -- Use check boxes for non-exclusive options that have clear +- Use checkboxes for non-exclusive options that have clear alternatives. Mutually exclusive options should use a set of :doc:`radio buttons ` or a :doc:`combo box `. @@ -31,7 +31,7 @@ :figclass: border :iconred:`BAD` |br| - Do not use a check box if the opposite is ambiguous. + Do not use a checkbox if the opposite is ambiguous. .. container:: @@ -67,7 +67,7 @@ Behavior ~~~~~~~~ -- Checking a check box should always "enable" an option or change the +- Checking a checkbox should always "enable" an option or change the state of an option to "on". Checking a negative or disabling option is a double negative and causes confusion and errors. @@ -96,7 +96,7 @@ - Users must not be able to set a mixed state directly. -- Clicking a mixed state check box enables all child objects. +- Clicking a mixed state checkbox enables all child objects. - Do not use sliding switches in Desktop applications. They only offer good user interaction on touch screens, so they should only be used in applications for mobile devices. @@ -121,19 +121,19 @@ If you are using qt widgets you should use one of Qt's Layout Classes like , that will take care of lay outing and spacing of your controls. -- The text of a check box is on the right of its tick rectangle, which +- The text of a checkbox is on the right of its tick rectangle, which can make it difficult to avoid blank areas on the left side of the form. To keep the layout of the form balanced you can use one of the following approaches: - - Group check boxes together in the widget column and add a label + - Group checkboxes together in the widget column and add a label describing the group in the label column. .. image:: /img/Grouped_checkboxes.qml.png :alt: Grouped checkboxes - - Make the check boxes span the two columns, but keep them at the + - Make the checkboxes span the two columns, but keep them at the bottom of the form. Remark: This interferes with other layout guidelines @@ -147,41 +147,41 @@ .. image:: /img/Checkbox_separate_label.qml.png :alt: Using a separate title label for the checkbox. -- When options are subordinate to a check box (e.g. Audio level can +- When options are subordinate to a checkbox (e.g. Audio level can only be set if the Activate Audio option is selected), this relation should be visualized by indenting the sub-options. There are two options to do so: - - When you are using a left-aligned check box, indent the + - When you are using a left-aligned checkbox, indent the sub-options by using a horizontal spacer of SizeType "Minimum". .. image:: /img/Suboption_spacer.qml.png :alt: Aligning sub-options with a horizontal spacer of SizeType "Minimum". - - When you are using a check box that is placed right to its label, - indent the sub-options in the same vertical axis as the check box. + - When you are using a checkbox that is placed right to its label, + indent the sub-options in the same vertical axis as the checkbox. .. image:: /img/Suboption_right.qml.png :alt: Aligning sub-options with the same vertical axis as the checkbox itself.| - If activating a choice affects the appearance or the enabled state of - other controls, place them next to the check box (group). -- Align check boxes vertically rather than horizontally, as this makes + other controls, place them next to the checkbox (group). +- Align checkboxes vertically rather than horizontally, as this makes them easier to scan visually. Use horizontal or rectangular alignments only if they greatly improve the layout of the window. - If certain controls in a configuration dialog are only relevant if a - certain check box is checked (i.e. they are dependent controls), - disable them instead of hiding them if that check box is unchecked. + certain checkbox is checked (i.e. they are dependent controls), + disable them instead of hiding them if that checkbox is unchecked. -- Do not separate check box and label. Clicking on both the box and the +- Do not separate checkbox and label. Clicking on both the box and the label should toggle the option. .. image:: /img/HIG_Checkbox5.png - :alt: Separate check box and label + :alt: Separate checkbox and label - Do not add line breaks. If necessary place an additional label below - the check box. + the checkbox. .. container:: flex @@ -197,9 +197,10 @@ :noblefir:`GOOD` -- Label a group of check box with a descriptive caption to the top left +- Label a group of checkbox with a descriptive caption to the top left of the group (cf. :doc:`alignment `). - Create a buddy relation so access keys are assigned. -- Use :doc:`sentence style capitalization ` for check box items. +- Use :doc:`sentence style capitalization ` + for checkbox items. - Do not use ending punctuation (neither dot nor colon) for group label. diff --git a/source/components/combobox.rst b/source/components/combobox.rst --- a/source/components/combobox.rst +++ b/source/components/combobox.rst @@ -49,7 +49,7 @@ - When possible apply changes immediately but do not initiate an action (like print, send, delete) when the user selects an item from the list. -- Do not add controls to the drop-down (e.g. check boxes for each +- Do not add controls to the drop-down (e.g. checkboxes for each item). - Place options that represent general options (e.g. all, none) at the beginning of the list. diff --git a/source/components/dropdown.rst b/source/components/dropdown.rst --- a/source/components/dropdown.rst +++ b/source/components/dropdown.rst @@ -60,7 +60,7 @@ - When possible apply changes immediately but do not initiate an action (like print, send, delete) when the user selects an item from a drop-down list. -- Do not add controls to the drop-down (e.g. check boxes for each +- Do not add controls to the drop-down (e.g. checkboxes for each item). - Place options that represent general options (e.g. all, none) at the beginning of the list. diff --git a/source/components/lineedit.rst b/source/components/lineedit.rst --- a/source/components/lineedit.rst +++ b/source/components/lineedit.rst @@ -39,7 +39,7 @@ - When setting a new password, have it entered twice to prevent typos in passwords. - - Provide a "Show password" check box to unmask the password both + - Provide a "Show password" checkbox to unmask the password both when setting new and when entering existing passwords. - Consider to use auto-complete feature to help users when entering diff --git a/source/components/radiobutton.rst b/source/components/radiobutton.rst --- a/source/components/radiobutton.rst +++ b/source/components/radiobutton.rst @@ -43,7 +43,7 @@ - If there are only two options where one is the negation of the other (e.g. "apply" vs. "do not apply"), consider replacing the radio - buttons by one :doc:`check box `. + buttons by one :doc:`checkbox `. .. container:: flex @@ -169,7 +169,7 @@ - Do not separate radio button and label. Clicking on both the button and the label should toggle the option. - Do not add line breaks. If necessary place an additional label below - the check box. + the checkbox. - Label a group of radio buttons with a descriptive caption to the top left of the group (cf. :doc:`alignment `). - Create a buddy relation so access keys are assigned. diff --git a/source/components/togglebutton.rst b/source/components/togglebutton.rst --- a/source/components/togglebutton.rst +++ b/source/components/togglebutton.rst @@ -17,7 +17,7 @@ out" respectively. Toggle buttons are a valid option to indicate a state with the advance -of using an icon. Compared to the related radio button or check box they +of using an icon. Compared to the related radio button or checkbox they are an efficient way to save screen space. But toggle buttons should be used with care outside a toolbar because the state is not clearly indicated. @@ -33,7 +33,7 @@ - Use a toggle button to indicate a state if no other control apply, i.e. in case of the :doc:`toolbar `. -- Prefer :doc:`radio buttons ` or :doc:`check boxes ` +- Prefer :doc:`radio buttons ` or :doc:`checkboxes ` outside the toolbar. Behavior diff --git a/source/components/tree.rst b/source/components/tree.rst --- a/source/components/tree.rst +++ b/source/components/tree.rst @@ -64,13 +64,13 @@ Multi selection: -- Use check boxes to indicate multiple selections. -- For check boxes, use the mixed state to indicate that an option is +- Use checkboxes to indicate multiple selections. +- For checkboxes, use the mixed state to indicate that an option is set for some, but not all, child objects. Users should not be able to - set a mixed state directly (cf. :doc:`check boxes `). -- Clicking a mixed state check box selects all child objects and the - parent check box. -- Don’t use check boxes in single selection trees. + set a mixed state directly (cf. :doc:`checkboxes `). +- Clicking a mixed state checkbox selects all child objects and the + parent checkbox. +- Don’t use checkboxes in single selection trees. Appearance ~~~~~~~~~~ diff --git a/source/layout/alignment.rst b/source/layout/alignment.rst --- a/source/layout/alignment.rst +++ b/source/layout/alignment.rst @@ -117,7 +117,7 @@ Separating groups of related options with a vertical spacer. -Check boxes and Radio buttons +Checkboxes and Radio buttons ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For more details on alignment of :doc:`radio buttons ` and :doc:`checkboxes ` see the detailed HIG pages. diff --git a/source/layout/metrics.rst b/source/layout/metrics.rst --- a/source/layout/metrics.rst +++ b/source/layout/metrics.rst @@ -40,7 +40,7 @@ - Line edits, Drop-downs, Combo boxes: ≥80 x 32 px - Text edits: ≥80 x ≥36 px (text should not exceed 80 characters per line) - - Check box, Radio button including label: ≥80 x 24 px + - Checkbox, Radio button including label: ≥80 x 24 px - Group boxes: ≥120 x ≥96 px - Tree view: ≥120 x ≥96 px - List view: ≥80 px (per column) x ≥96 @@ -96,8 +96,8 @@ - related items within groups: 2 * units.smallSpacing - label and item: units.smallSpacing - - related controls with same type (check boxes / radio buttons): units.smallSpacing - - related controls with different type (check box / button): units.smallSpacing + - related controls with same type (checkboxes / radio buttons): units.smallSpacing + - related controls with different type (checkbox / button): units.smallSpacing - unrelated controls: ≥ 2 * units.smallSpacing .. figure:: /img/Spacing_Padding.qml.png diff --git a/source/style/writing/capitalization.rst b/source/style/writing/capitalization.rst --- a/source/style/writing/capitalization.rst +++ b/source/style/writing/capitalization.rst @@ -68,7 +68,7 @@ - List box labels - Combo box labels - Spin box labels -- Check box labels +- Checkbox labels - Option button labels - Slider labels - Pop-up hint text diff --git a/source/style/writing/labels.rst b/source/style/writing/labels.rst --- a/source/style/writing/labels.rst +++ b/source/style/writing/labels.rst @@ -71,10 +71,10 @@ - Do not assign an access key. Tabs are accessible through their shortcut keys (Ctrl+Tab, Ctrl+Shift+Tab). -Check boxes and Radio buttons +Checkboxes and Radio buttons ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -- Label every check box or radio button. Do not leave check boxes or +- Label every checkbox or radio button. Do not leave checkboxes or radio buttons unlabeled. - Assign a unique access key to each label. - Labels must start with an active verb clearly defining the state to