Radio

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 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

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