Forms
Checkboxes
Check boxes allow the user to select multiple options as their response as preference of answers to questions where a multiple answers from amongst a given set may be required to be selected.
There are two main sizes of the check boxes to be used across breakpoints. The larger one usable on Large - Medium screen sizes, while the smaller one for medium to small screen sizes. The minimum padding specs are as follows:
Annotation
States
Below is a general visualization for all the states of Checkbox with size 20px X 20px which responsively converts to 16px X 16px, when unchecked/checked.
Default state
Hover state
Focus state
Down state
Disabled state
Disable & Checked
Spacing & Usage
List View
The users can be presented with options in groups as shown below.
Annotation
Visual display
For large-medium size break points
Group name
Group name
Group name
Sub Group title 1
Sub Group title 2
For small size break points
Group name
Group name
Group name
Sub Group title 1
Sub Group title 2
Code Usage
Group name
Code Usage
Group name
Code Usage
Group name
Sub Group title 1
Sub Group title 2
In Picklists or Dropdown menus
The users can be presented with options in a picklist or dropdown menu where the radio button would precede the option description. The visualization is shown below:
Default state
Down state
Focus state
While all other States for the button remains the same, the downstate & Focus states indicates the entire option, which text and its padding to ensure the user knows what they have selected.
Code Usage
Code Usage
Code Usage
For selection of groups with a second layer of preferences
As seen below the checkbox is for a group that has a set of choices enclosed along with other data. Here the checkbox is for the whole group, which is why is needs to be spaced out to indicate selection for the set.
Code Usage
As Select all
Sometimes the groups of choices as seen above can be one too many for the user to selected individually. They may find that they want to select most, in which case they would look for an option for bulk selection. This has been provisioned for in the form of a sort of a toast message that appears as seen below:
Code Usage
To indicate compliance, agreement or acceptance.
Other than preferences, the checkbox also offers another functionality, which is that of recording consent, compliance, agreement or acceptance. Most commonly it would be found with a statement and will be a pre-requisite for moving to the next step. If missed to be checked, the user would be informed that they need to check the box in order to proceed.
Annotation
