Use Checkbox...
- To select more than one option.
- If there is an indeterminate state to express when only a portion of the option group is selected.
- To apply a setting that needs to be confirmed and reviewed by the user before they are submitted.
- Typically inside a Selection Set
skin="simple-column", as this provides a preset label and the correct spacing.
Don't use Checkbox...
- To select one option from a list of options. Use Radio Button instead.
- To prompt users to choose between two mutually exclusive options that always has a default value, like “on” or “off”. Use Toggle Switch instead.
SWAN checkbox provides the same functionality as a native input type="checkbox" enhanced with styling.
Default
The default Checkbox has three states.
Unchecked
ShareChecked
Indeterminate
- Use
indeterminatefor a parent checkbox to represent a mix of sub-options that are checked and unchecked. - As a result, the parent checkbox cannot definitively be either 'checked' or 'unchecked'. This state renders a UI visual that masks the real value of the checkbox. The actual state of the checkbox is still either checked or unchecked.
In the React API, you can achieve the indeterminate state by using the indeterminate prop.
In the Vanilla API, there is no declarative syntax for indeterminate checkboxes because HTML does not provide one. Instead, use JavaScript to set the checkbox to indeterminate. Refer to MDN for more details.
Checkbox group
Refer to the Selection Set skin=”simple-column” guidelines.
Favorite
Use skin="favorite" to display the Checkbox as a heart shape.
To provide a label or labelling text, add an associated <label> tag (which can be visually hidden), or localized text in an aria-label attribute.
Use instant to make the checkbox animate instantly, in cases where having the animation would be distracting.
Accessibility
- Add
aria-required="true"to the input if a checkbox is a required field before the user can submit the page. - If not used inside a Selection Set, and if there is more than one checkbox in that group of choices, place either inside:
- A
<fieldset>(refer to Fieldset), or - An element with the attribute
role="group". This wrapper element must have anaria-labelledbyattribute whose value is the id of the element that acts as a title for the group — or if the group does not have a visible title, anaria-labelattribute whose value is a descriptive title of the group. The value ofaria-labelmust be localized, as some browsers will read it to the user.
- A