Usage
Checkboxes allow user to select many options from a limited number of choices. Use checkboxes in forms, for filtering purposes, or to let user accept certain conditions. Checkboxes have 3 states: selected, unselected, and mixed.
Best practices
Do
Use checkboxes when it’s possible to select more than one option.
Don't
Don’t use the checkbox for mutually exclusive single-select choices. Use the radio button instead.
Do
Use hint to provide additional information about checkbox.
Don't
Don’t hide additional information behind the tooltips or icons.
Do
Use mixed state to represent value of a group of checkboxes, and for bulk selection of items.
Don't
Don’t use mixed state on a single checkbox.
Examples
Live Preview
Props
Fetching props...
Events
Fetching events...
Slots
Fetching slots...