The checkboxes are primarily used in forms for collecting input from users. Users can select one or more options within a list.
|
|
The checkbox should be used when users have to select one or more options from a list of related items. This component is also used when an explicit action is required to apply the setting.
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Checkbox |
Used in forms to select one or more options within a given list of items. |
Can be placed everywhere within the grid system. |
On click, the state toggles. |
Anatomy
Structure
|
|
|
Input control |
Gives the possibility to the user to select the option. |
|
Label |
Indicates the name of the information asked the user. |
Sizes and Spaces
|
The distance between the input control and the label should be 8px.
Within a list, there should be a spacing of 16px between each checkbox option. |
Properties
|
Property |
Value |
|---|---|
|
Selected |
true false indeterminate |
|
State |
default disabled hover read-only |
Whats' the difference between disabled and read-only ?
disabled - A form component is disabled to indicate that it cannot be used. This might be because it is not applicable, e.g. due to the value of some other previous field.
read-only - Read-only, on the other hand, is used when a field is currently only used to display a value, without providing any means of changing it, e.g. when you're in a profile page, you can read data but you cannot edit it.
Behaviour
Responsiveness
The text label adapts to the width of the container. When there is text-wrap, the input control is centred vertically with the text.
Guidelines
⛔️ Don't
Don't use checkboxes when only one item can be selected from a list. Use radio buttons instead.
⛔️ Don't
Don't use checkboxes when the user is activating or deactivating options. Use toggle buttons instead.