Switch

Planned

The switch component is a simple control that provides a way for the user to toggle between two options. The switch can be used within forms, but is more frequently used as a way to turn features (or entire feature sets) on or off.

Switch

Anatomy

The essential parts of a switch are the container (or the rail) and the handlebar. The switch has two variations: standard and accessible. 

Standard

The standard switch is for users that have not specifically turned on the accessibility settings on their device. 

  1. Knob (32px)
  2. Rail (100px width)

Accessible

The accessible switch is for users that have turned on accessibility settings on their device, and the platform supports it. Currently only iOS is known to support this.  

  1. Knob
  2. Rail (100px width)
  3. On/off indicator (12px) (iOS only)

Specs

Color (Static/Inactive)

Element Property Value
Knob Background color ∆colorBrandedAffordanceAccessible
Knob Shadow color ∆surfacePlatformRaisedShadowColor
Rail Background color ∆colorBrandedAffordance100
On/off indicator (accessible variant) Background color ∆colorBrandedAffordanceAccessible

Color (Static/Inactive Hover)

Element Property Value
Knob Background color ∆colorBrandedAffordanceAccessible
Knob Shadow color ∆surfacePlatformRaisedShadowColor
Knob Border color ∆colorBrandedAffordance300
Rail Background color ∆colorBrandedAffordance100
On/off indicator (accessible variant) Background color ∆colorBrandedAffordanceAccessible

Color (Static/Inactive Disabled)

Element Property Value
Knob Background color ∆colorBrandedAffordanceAccessible
Knob Shadow color ∆surfacePlatformRaisedShadowColor
Knob Border color ∆colorBrandedAffordance300
Rail Background color ∆colorBrandedAffordance100
On/off indicator (accessible variant) Background color ∆colorBrandedAffordanceAccessible

Color (Selected)

Element Property Value
Knob Background color ∆colorBrandedAffordance50
Knob Shadow color ∆surfacePlatformRaisedShadowColor
Knob Background color ∆colorBrandedAffordanceAccessible
On/off indicator (accessible variant) Background color ∆colorBrandedAffordance50

Color (Selected Hover)

Element Property Value
Knob Background color ∆colorBrandedAffordance50
Knob Shadow color ∆surfacePlatformRaisedShadowColor
Knob Border color ∆colorBrandedAffordance300
Rail Background color ∆colorBrandedAffordanceAccessible
On/off indicator (accessible variant) Background color ∆colorBrandedAffordance50

Color (Selected Disabled)

Element Property Value
Knob Background color ∆colorBrandedAffordance50
∆colorPlatformAlpha75
Knob Shadow color ∆surfacePlatformRaisedShadowColor
Rail Background color ∆colorBrandedAffordanceAccessible
On/off indicator (accessible variant) Background color ∆colorBrandedAffordance50

Elevation

Element Property Value
Knob Shadow Y offset ∆surfacePlatformRaisedShadowY
Knob Shadow opacity ∆surfacePlatformRaisedShadowOpacity
Knob Shadow spread ∆surfacePlatformRaisedShadowSpread
Knob Shadow blur ∆surfacePlatformRaisedShadowBlurResting

Spacing

States


Theming

Color (Static/Inactive)

Element Property Value
Knob Background color ∆colorBrandedAffordanceAccessible
Rail Background color ∆colorBrandedAffordance100
On/off indicator (accessible variant) Background color ∆colorBrandedAffordanceAccessible

Color (Static/Inactive Hover)

Element Property Value
Knob Background color ∆colorBrandedAffordanceAccessible
Knob Border color ∆colorBrandedAffordance300
Rail Background color ∆colorBrandedAffordance100
On/off indicator (accessible variant) Background color ∆colorBrandedAffordanceAccessible

Color (Static/Inactive Disabled)

Element Property Value
Knob Background color ∆colorBrandedAffordanceAccessible
Rail Background color ∆colorBrandedAffordance100
On/off indicator (accessible variant) Background color ∆colorBrandedAffordanceAccessible

Color (Selected)

Element Property Value
Knob Background color ∆colorBrandedAffordance50
Rail Background color ∆colorBrandedAffordanceAccessible
On/off indicator (accessible variant) Background color ∆colorBrandedAffordance50

Color (Selected Hover)

Element Property Value
Knob Background color ∆colorBrandedAffordance50
Knob Border color ∆colorBrandedAffordance300
Rail Background color ∆colorBrandedAffordanceAccessible
On/off indicator (accessible variant) Background color ∆colorBrandedAffordance50

Color (Selected Disabled)

Element Property Value
Knob Background color ∆colorBrandedAffordance50
Rail Background color ∆colorBrandedAffordanceAccessible
On/off indicator (accessible variant) Background color ∆colorBrandedAffordance50

Shape

Element Property Value
Rail (sharp) Border radius
Rail (soft) Border radius TBD
Rail (squircle) Border radius TBD
Rail (rounded) Border radius TBD

‍

Placement

Generally a switch can be used as a form input or as a way to turn a featureset on or off, and should follow the placement/alignment of any sibling content. As an example, when placed within a form, the switch should be left aligned if the other form elements are left aligned, centered if the other form elements are centered, or right aligned if the other form elements are right aligned. If the switch appears in a list where other list items have labels left aligned and controls right aligned, the switch should maintain the pattern and be right aligned. Ultimately the switch doesn’t have any placement and/or alignment opinions, and should be controlled by the parent container.


Behavior

When toggling a switch, the related action should occur immediately; changes should take effect right when the user interacts with the switch without the need to interact with a save or submit button. Any changes resulting from interacting with the switch should persist until the user flips the switch again.  

Static/Inactive —Hover

Interaction Steps Duration Easing Notes Haptics
Timeout 1a. Fade In ∆motionTimeNano ∆motionEasingStandard Fade opacity from 0-100%
Selection trigger 1a.Scale out ∆motionTimeModerate ∆motionEasingStandard Scale from 75-125%
1b. Fade In ∆motionTimeFast ∆motionEasingStandard Fade opacity from 50-100%
1c. Fade Out ∆motionTimeFast ∆motionEasingStandard Fade opacity from 100-0%


Selected

Interaction Steps Duration Easing Notes Haptics
Selected State 1. X Position ∆motionTimeExtraFast ∆motionEasingStandard Move the knob horizontally from 0px to 52px
Selected transition 1. X Position ∆motionTimeExtraFast ∆motionEasingStandard Move the knob hover horizontally from 0px to 52px
Rail transition 1. Fade In ∆motionTimeExtraFast ∆motionEasingStandard Fade opacity from 0-100% transition into selected state

Selected —Indicator On

Interaction Steps Duration Easing Notes Haptics
Selected State 1. X Position ∆motionTimeExtraFast ∆motionEasingStandard Move the knob horizontally from 0px to 52px
Indicator Off 1a. X Position ∆motionTimeExtraFast ∆motionEasingStandard Move the indicator horizontally from 0px to 24px
1b. Fade Out ∆motionTimeExtraFast ∆motionEasingStandard Fade opacity from 100-0%
Indicator On 1a. X Position ∆motionTimeFast ∆motionEasingStandard Move the indicator horizontally from -24 to 0px
1b. Fade In ∆motionTimeFast ∆motionEasingStandard Fade opacity from 0–100%

Selected/Static —Hove

Interaction Steps Duration Easing Notes Haptics
Hover select 1a. Fade In ∆motionTimeNano ∆motionEasingStandard Fade opacity from 0-100%
Selection trigger 1a.Scale out ∆motionTimeModerate ∆motionEasingStandard Scale from 75-125%
1b. Fade In ∆motionTimeFast ∆motionEasingStandard Fade opacity from 50-100%
Indicator On 1a. X Position ∆motionTimeFast ∆motionEasingStandard Move the indicator horizontally from -24 to 0px
1c. Fade Out ∆motionTimeFast ∆motionEasingStandard Fade opacity from 100-0%


Inactive

Interaction Steps Duration Easing Notes Haptics
Selected State 1. X Position ∆motionTimeExtraFast ∆motionEasingStandard Move the knob horizontally from 52px to 0px
Selected transition 1. X Position ∆motionTimeExtraFast ∆motionEasingStandard Move the knob hover horizontally from 52px to 0px
Rail transition 1. Fade In ∆motionTimeExtraFast ∆motionEasingStandard Fade opacity from 0-100% transition into Inactive state

‍

Inactive — Indicator Off

Interaction Steps Duration Easing Notes Haptics
Selected State 1. X Position ∆motionTimeExtraFast ∆motionEasingStandard Move the knob horizontally from 52px to 0px
Indicator On 1a. X Position ∆motionTimeExtraFast ∆motionEasingStandard Move the indicator horizontally from 0px to -24px  
  1b. Fade Out ∆motionTimeExtraFast ∆motionEasingStandard Fade opacity from 100-0%
Indicator Off 1a. X Position ∆motionTimeFast ∆motionEasingStandard Move the indicator horizontally from 24 to 0px
1b. Fade In ∆motionTimeFast ∆motionEasingStandard Fade opacity from 0-100%


Loading — Indeterminate 

‍

Interaction Steps Duration Easing Notes Haptics
Knob transition 1. X Position ∆motionTimeExtraFast ∆motionEasingStandard Move the knob horizontally from 0 to 52px
Indicator Off 1a. X Position ∆motionTimeExtraFast ∆motionEasingStandard Move the indicator horizontally from 0px to 24px
1b. Fade Out ∆motionTimeExtraFast ∆motionEasingStandard Fade opacity from 100-0%
Indicator On 1a. X Position ∆motionTimeFast ∆motionEasingStandard Move the indicator horizontally from -24 to 0px
1b. Fade In ∆motionTimeFast ∆motionEasingStandard Fade opacity from 0-100%

Loading Complete — Indeterminate 

After the loading is complete the selected static switch will be enabled.

Interaction Steps Duration Easing Notes Haptics
Entrance 1. Fade In Component ∆motionTimeNano ∆motionEasingStandard Fade opacity from 0–100%



Developer Docs

Vue Developer Docs

Component documentation coming soon!

Introduction
Anatomy
Specs
States
Theming
Placement
Behavior
Dev Docs
Dev Docs