Usage & Type

Usage

Checkboxes are the appropriate elements when users can choose between multiple options. They can appear as a single checkbox or grouped.

In a checkbox group the choices are not exclusive, that is, a user can check several options in a group. If you need single-selection use radio buttons or a dropdown list box, instead.

Checkbox Group

For groups of checkboxes use the checkbox group control if applicable. This control allows to arrange checkboxes in one column, one row, or in a matrix-like fashion.

Note: It is not possible to determine the horizontal spacing within a checkbox group. If you need a different spacing than that supplied by the checkbox group control, use single checkboxes and a grid layout control if applicable.

Arrangement and Design Alternatives

Checkboxes offer one or multiple choices to the user. The user can select none, one, or as many options as desired in a group of checkboxes.

Checkbox groups offer users a set of multiple options that may be arranged either horizontally (2-3 checkboxes), vertically (not more than about 12 checkboxes), or in a matrix-like fashion. Note that checkbox groups are appropriate for static and relative small numbers of options only. Use the table view for larger and dynamic option sets.

For the alignment of checkboxes we distinguish the following cases:

• Checkboxes that refer to adjacent fields.

• Checkboxes that do not refer to elements but should be included in field groups.

• Checkboxes that can be arranged as an independent block of information

Case 1: Checkboxes that Refer to One or More Fields

Figure 1a-b: Checkbox that refers to one input field above it (left) or to two (City and Street, right)

Alternatively, a single checkbox can be placed to the right of a reference field (figure 1c) if space permits. If there is more than one reference field place the checkbox right to the bottom reference field.

Figure 1c: Checkbox that refers to an input field left of it (equivalent to figure 1a)

Case 2: Checkboxes that are Included in a Field Group

If checkboxes are included in a field group but do not refer to a certain field, place the checkbox labels to the left and align the checkboxes themselves with the other input fields (figure 2a).

Note: In this case you have to set the checkbox text to an empty text and use the label control for the label.

Alternatively, you can add a label that is left-aligned with the other labels of the group and use the checkbox text for additional information (figure 2b). In that case, only the first checkbox should have a label that describes the whole group.

Figure 2a-b: Checkbox within a field group, either with label to the left (left), or with two labels

If space permits you can alternatively use a horizontal checkbox group that occupies one line (typically for 2-3 checkboxes, figure 2c).

Figure 2c-d: Horizontal checkbox group within a field group (left); indented checkbox without group label (right). Figure 2d shows wrong alignment because the checkbox does not refer to the password field.

Note: Do not use an arrangement without a group label in this case (figure 2d) because it may lead to misinterpretations. Such a layout suggests a dependency from the field above the group to the user. Even though the layout in figure 2d is the same as in 1a, the usage is incorrect because the checkbox does not refer to the password field. Therefore, use it only if such a dependency does exist (case 1).

Case 3: Checkboxes that Form an Independent Information Block

If checkboxes are arranged in a checkbox group, they are left aligned with other labels and arranged in a matrix-like fashion. Such groups have either to be included in a group control (see figure 3a) or separated from the field group by white space (figure 3b).

Figure 3a-b: Checkbox group that forms an information unit of its own - either included in a group (left) or separated by an empty line (right)

Instead of a matrix, you can use a horizontal arrangement if there are only few checkboxes. In this case, set the columnCount attribute of the checkbox group control to a value that results in one row only.

There are two possible arrangements for horizontal checkbox groups:

• The checkbox row can be introduced by a label to the left - in this case align the checkboxes with other elements and use the label control for the label (figure 4a)

• The checkbox row does not have an introductory label (figure 4b)

Separate the horizontal checkbox group from preceding fields by an empty line.

Note: An "extreme" case of a horizontal checkbox group is a single checkbox.

Figure 4a-b: Example of a horizontal checkbox group, either with an introductory label to the left (left), or without an introductory label (right).

For more than two to three checkboxes a vertical arrangement with or without label may be more appropriate (see figure 5a and 5b).

Figure 5a-b: Example of a vertical checkbox group, either with an introductory label to the left (left), or without (right).

Dependent Fields

In some cases, the state of input fields, dropdown list boxes, or other controls may depend on the setting of a checkbox. Below we present a simple example where users may enter their contact preferences (figure 6a). An unchecked checkbox describes the default case; it is set the input field below it is read-only. A checked checkbox describes the less frequent case. If the user checks the checkbox, the input elements are ready for input.

Figure 6: Checkboxes that controls the editability of the input field(s) below the checkbox

If there are more dependent elements indent the dependent group so that their labels are left aligned with other input fields (top checkbox). If there is only one dependent field, usually a field label is not needed (bottom checkbox).

Design-relevant Attributes

Checkboxes have the disabled and checked attributes. Set disabled to TRUE if a checkbox cannot be checked or unchecked by a user temporarily. Set checked to TRUE to preset a checkbox to the checked state. Use attribute text to set the descriptive label text for a checkbox.

You can also set the column count for checkbox groups (attribute columnCount).

Related Controls

Radio Button , Dropdown List Box , List Box , Label , Grid Layout