Usage
- Use when you want to allow a user to select at least one option from a list.
- When only one choice can be active in a list of a few mutually exclusive options, use a Radio Button instead.
- When only one choice can be active in a list of many mutually exclusive options, use a Select instead.
- If the intention is for a user to turn something off or on with their selection, and for their selection to have an immediate effect, consider using a Toggle instead.
Design properties
See Storybook for code
| Property | Values | Default |
|---|---|---|
| State Variant | Default | Hover | Active | Focus | Disabled | Default |
| Checked Variant | Off | On | Off |
| Indeterminate Variant | Off | On | Off |
| Property | Values | Default |
|---|---|---|
| Icon InstanceSwap | ||
| Show slot Boolean | true | false | false |
| Slot InstanceSwap | ||
| Show icon Boolean | true | false | true |
| Disabled Variant | Off | On | Off |
| Show description Variant | Off | On | Off |
| Show support link Variant | Off | On | Off |
Types
With label
With label and description
With label and icon
With label and link
Layouts
Single
Provides users with a single, binary choice. A selected box (showing the check) means an item is “on” or enabled.
List
Provides users with a list of related elements from which multiple items can be selected.
Nested
Nest checkboxes to convey that some options are only available if the parent option is selected.
Closed
Open
Writing guidelines
- When possible, use labels that describe the action or result of selecting the checkbox: “Search for text when you start typing”.”
- Use the same terms to describe the selection in the label and any supporting copy.
- Use the imperative voice.
- Maintain parallel construction for lists of related checkbox labels: “Use autoscrolling” and “Use smooth scrolling”.
- Truncate checkbox labels. Can wrap (to two lines max) but avoid if possible.
- Use terminal punctuation after checkbox labels.
- Use first person.
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Aug 4, 2024 |
2.0.0 |
Simplified template |
|
Jan 29, 2024 |
1.0.0 |
Initial draft of checkbox guidance |