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.