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 radio can be selected or unselected — this is a visual affordance. In addition, radios have 5 interactive states that 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 radio is disabled.
Disabled radios are unusable. Disable a radio to keep users from interacting with the radio 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
