Anatomy
Defining shared language for discussing the construction and structure of this component.
|
Key |
Category |
Parts |
|---|---|---|
|
1 |
Shape |
Border radius, border color |
|
2 |
Text, Label |
Font family, size/line height, color |
|
3 |
Shape |
Background color |
|
4 |
Text, Description |
Font family, size/line height, color |
Variants
Figma library (internal only)
Acorn offers 2 Android checkbox variants in 1 size, with 2 states across 2 modes (themes).
Sizes
States
An Android checkbox can be checked or unchecked — this is a visual affordance. In addition, Android checkboxes have 2 interactive states that may affect the visual output.
Available interactive states: Enabled, and disabled
The disabled state has an important caveat that applies across modes.
Disabled
Disabled visual styles should only be applied when a checkbox is disabled.
Disabled checkboxes are unusable. Disable a checkbox to keep users from interacting with the checkbox until conditions are met.
Default
Figma component (internal only)
Examples
Enabled
Disabled
Enabled
Disabled
Enabled
Disabled
Nested
Figma component (internal only)
Examples
Enabled
Disabled
Enabled
Disabled
Enabled
Disabled
With description
Figma component (internal only)
Examples
