Checkboxes
Checkboxes allow users to select one or more items from a set, or to turn an option on or off. Material Design 3 checkboxes use a filled appearance when selected.
Live Preview
Standard Checkboxes
Indeterminate State
Disabled States
Brand Properties
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| container.size | dimension | 18px | 18px | 18px |
| container.borderRadius | dimension | 2px | 2px | 2px |
| container.borderWidth | dimension | 2px | 2px | 2px |
| selected.containerColor | color | #6750A4 | #038012 | #1A5129 |
| selected.checkmarkColor | color | #FFFFFF | #FFFFFF | #FFFFFF |
| unselected.borderColor | color | #79747E | #79747E | #79747E |
| disabled.containerColor | color | #CAC4D0 | #CAC4D0 | #CAC4D0 |
| stateLayer.hoverOpacity | percentage | 8% | 8% | 8% |
| stateLayer.focusOpacity | percentage | 12% | 12% | 12% |
| stateLayer.pressedOpacity | percentage | 12% | 12% | 12% |
| touchTarget.minSize | dimension | 48px | 48px | 48px |
Usage Guidelines
- Use checkboxes when users can select multiple options from a list
- Use the indeterminate state when a parent checkbox has some but not all children selected
- Always provide a visible label for accessibility
- Group related checkboxes together with a clear heading
- Consider using switches for single on/off options instead