Toggle chips

Toggle chips contain selection controls that enable the user to select options.

Types

Toggle chip

Toggle chips enable users to make choices such as selecting options or switching settings on or off.

Split toggle chip

Split toggle chips have the same function as toggle chips but include a secondary function illustrated by two tap areas.

Selection controls

1. Switch

A switch that turns a selection on or off.

2. Radio

A radio button list that only allows a single selection.

3. Checkbox

A checkbox list that allows multiple selections.

States

A toggle chip’s state makes it clear which chip is active.

Active/on

The fill color and gradient overlay show that the chip is active.

Inactive/off

The dimmed state and lack of color show that the chip is inactive.

Anatomy

Toggle chips are typically composed of multiple elements which vary based on toggle chip type.

Toggle chip

A. Primary text label

B. Secondary text label (optional)

C. Container (active/on)

D. Icon (optional)

E. Selection control (active/on)

Split toggle chip

A. Primary text label

B. Secondary text label (optional)

C. Container (inactive/off)

E. Selection control (inactive/off)

F. Divider

Tap targets

Toggle chip

A. Tapping any part of the toggle chip changes its state.

Split toggle chip

A split toggle chip has two tap areas: text area and control area.

A. The text area contains labels. <

B. The control area contains selection controls.

Usage

See the following examples of toggle chip use cases.