Release Notes
Components
Guidelines
Patterns
Words
Resources
Parent Checkbox
/
Design
Select multiple items based on their relationship.
In certain cases, there are so many options within a category that make orgnization tricky. The parent checkbox's responsibility is to maintain the parent-child relationship for selection clearly.
Size
The parent checkbox comes in all of our four available sizes, x-small, small, medium and large.
X-small: Only use this when you really need to squeeze, like in a sidebar.
State
A parent checkbox’s state depends on the interaction itself or a submission error.
- Default: The focus state is sorted for you, so anyone navigating via keyboard or screen reader is set.
- Indeterminate: The indeterminate state will appear when any one child option is chosen, but the related parent is not.
- Disabled: This prevents the user from interacting with a field until certain conditions are met. Should be used sparingly, but a good way to prevent invalid submissions.
Microcopy
Labels
A label should clearly and concisely describe the parent-child relationship in no more than a few words.
Don'tmake the label a complete sentence telling the user what to do.
Doname exactly what belongs in that relationship.
Check UI label guidelines for more detail on case and punctuation.
Nesting Relationships
When nesting selectable items, be clear why or how the nested items are related to their parent.
Don'tuse nesting to indent selectable items without reason.
Domaintain a clear parent-child relationship between all nested items.
Accessibility
Audit Results
See our full accessibility audit for more information about these results.
| Platform | Visual | Interactive | Automated | Details |
|---|---|---|---|---|
| React | Pass | Pass | Pass |
Platform
| platform | notes |
|---|---|
| Web |
|
| Apple |
|
| Android |
|
| No guidelines exist for other platforms (yet). |