Forms - Using Checkboxes

Alignment | Dependent Fields | Related Controls

	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.
Figure 1: A checkbox group

This page covers the arrangement of checkboxes, that is, their spatial and dependency relation to fields and other elements in form-like structures. For details on the checkbox control itself, see Checkbox.

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.

Arrangement

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

Align dependent checkboxes with the left border of other input elements (figure 1a-b). Place the checkbox labels right to the checkbox (done automatically for the checkbox control).

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)

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

Top

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

Top

Related Controls

Top