Checkboxes

Overview

Checkboxes are contained in a fieldset tag for accessibility and categorization purposes. By selecting the checkbox and label option, you submit data that is part of an online form. The input data will not be recorded until you press a submission button.

Design

Usage guidelines

Layout

The fieldset width is responsive to 100% of the layout container while the arrangement is set vertically for ease of scanning and comparing.

Size and positioning

• Box itself is 24 pixels by 24 pixels.
• Text size is 18 pixels with a line height of 28 pixels.
• Box has a border of 1 pixel, solid and #666666.
• Border radius is 2 pixels.
• Hover state colour of the box is #EEEEEE with a border colour of #004F84.

Content guidelines

Select multiple options

Use checkboxes when several options are available. Use radio buttons or a drop down list when you can only select one option.

Use up to 10 checkboxes to avoid long lists of checkboxes.

Labeling

Make the checkbox label clear, concise, and relevant to the selectable option.