Switch

Switches toggle the state of a single item off or on.

When to use

Simple Action

Switches allow uses to easily toggle an item off or on

Simple Action

Switches allow uses to easily toggle an item off or on

Simple Action

Switches allow uses to easily toggle an item off or on

Mobile/Tablet

Switches have a larger visual touch area for mobile users to easily see whether the item is off or on

Mobile/Tablet

Switches have a larger visual touch area for mobile users to easily see whether the item is off or on

Mobile/Tablet

Switches have a larger visual touch area for mobile users to easily see whether the item is off or on

When to avoid

Complex Selection

A switch must have an quick and instantaneous understanding if the user is toggling something off or on

Complex Selection

A switch must have an quick and instantaneous understanding if the user is toggling something off or on

Complex Selection

A switch must have an quick and instantaneous understanding if the user is toggling something off or on

Critical Settings

Avoid using switches for actions that could have serious consequences if accidentally toggled. Instead, use confirmation modals or other safeguards to prevent these changes

Critical Settings

Avoid using switches for actions that could have serious consequences if accidentally toggled. Instead, use confirmation modals or other safeguards to prevent these changes

Critical Settings

Avoid using switches for actions that could have serious consequences if accidentally toggled. Instead, use confirmation modals or other safeguards to prevent these changes

Specifications

Orientation

On Left

On Right

On Left

On Right

On Left

On Right

On Left

On Right

States

Enabled Selected

Disabled Selected

Enabled Unselected

Disabled Unselected

Enabled Selected

Disabled Selected

Enabled Unselected

Disabled Unselected

Enabled Selected

Disabled Selected

Enabled Unselected

Disabled Unselected

Enabled Selected

Disabled Selected

Enabled Unselected

Disabled Unselected

Anatomy

Track

The background of the switch, which changes color to provide a clear visual indication of the on/off state.

Thumb

The sliding handle that the user interacts with to toggle the switch between its two states.

Label

Should indicate some kind of instruction for selection. If majority of fields are required in a single form, the "Option" label can be toggled on. If majority of fields are optional, the "Required asterisks" should instead be toggled on.

Value

Switch