Checkbox

null

Anatomy

Defining shared language for discussing the construction and structure of this component.

null

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

null

Disabled

null

Enabled

null

Disabled

null

Enabled

null

Disabled

null

Nested

Figma component (internal only)

Examples

Enabled

null

Disabled

null

Enabled

null

Disabled

null

Enabled

null

Disabled

null

With description

Figma component (internal only)

Examples

Behavior and interaction

Writing guidelines

Localization