Checkbox

A check box toggles a selected option on or off. When the check box control is checked the option is on; when cleared it is off.

Whenever you have one or more options that users can toggle on or off.

Checkboxes must always be placed within a containing form block and wrapped within a label tag. One or two checkboxes can be placed next to each other (side by side) on the same HTML line (example 1). Three or more checkboxes in a group must be stacked on top of each other in separate lines (example 2)

When placing checkboxes side by side (two or fewer), the label element follows the input element (see example 1). When stacking checkboxes, a class of "stacked" is applied to the containing cell, and the label element wraps the input element (see example 2).

The following guidelines come from the Microsoft UX Guide:

The following general guidelines should be followed when working with horizontal tables:

• Is the check box used to toggle an option on or off or to select or deselct an item? If not, use another control.
• Are the selected and cleared states clear and unambiguous opposites? If not, use radio buttons or a drop-down list so that you can label the states independently.
• When used in a group, does the group comprise independent choices, from which users may choose zer or more? If not, consider controls for dependent choices, such as radio buttons and check box tree views.
• Is the number of options in a group 10 or fewer? Since the screen space used is proportional to the number of options, keep the number of check boxes to 10 or fewer. For more than 10 options, use a check box list.
• Would radio buttons be a better choice? Where check boxes are suitable only for turning an option on or off, radio buttons can be used for completely different options.