Switch

Approved — Ready for dev

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.

Anatomy

The essential parts of a switch are the container (or the rail) and the handlebar. Note: The switch can be accessible and will show an on/off indicator if accessibility is turned on for their device.

Knob (32px)
Rail (100px width)

Accessibility Concerns

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.

Knob
Rail (100px width)
On/off indicator (12px) (iOS only)

Specs

Color

Element	Property	Value
Knob (Static/Inactive)	Background color	∆colorBrandedAffordanceAccessible
Knob (Static/Inactive)	Shadow color	∆surfacePlatformRaisedShadowColor
Rail (Static/Inactive)	Background color	∆colorBrandedAffordance100
On/off indicator (accessible variant) (Static/Inactive)	Border color	∆colorBrandedAffordanceAccessible
Knob (Static/Inactive Hover)	Background color	∆colorBrandedAffordanceAccessible
Knob (Static/Inactive Hover)	Shadow color	∆surfacePlatformRaisedShadowColor
Knob (Static/Inactive Hover)	Border color	∆colorBrandedAffordance300
Rail (Static/Inactive Hover)	Background color	∆colorBrandedAffordance100
On/off indicator (accessible variant) (Static/Inactive Hover)	Background color	∆colorBrandedAffordanceAccessible
Knob (Static/Inactive disabled)	Background color with alpha	∆colorBrandedAffordanceAccessible ∆colorPlatformAlpha400
Knob (Static/Inactive disabled)	Shadow color	∆surfacePlatformRaisedShadowColor
Rail (Static/Inactive disabled)	Background color with alpha	∆colorBrandedAffordance100 ∆colorPlatformAlpha400
On/off indicator (accessible variant) (Static/Inactive disabled)	Background color	∆colorBrandedAffordanceAccessible
Knob (On)	Background color	∆colorBrandedAffordance50
Knob (On)	Shadow color	∆surfacePlatformRaisedShadowColor
Rail (On)	Background color	∆colorBrandedAffordanceAccessible
On/off indicator (accessible variant) (On)	Background color	∆colorBrandedAffordance50
Knob (Selected hover)	Background color	∆colorBrandedAffordance50
Knob (Selected hover)	Shadow color	∆surfacePlatformRaisedShadowColor
Knob (Selected hover)	Border color	∆colorBrandedAffordance300
Rail (Selected hover)	Background color	∆colorBrandedAffordanceAccessible
On/off indicator (accessible variant) (Selected hover)	Background color	∆colorBrandedAffordance50
Knob (Selected disabled)	Background color with alpha	∆colorBrandedAffordance50 ∆colorPlatformAlpha400
Knob (Selected disabled)	Shadow color	∆surfacePlatformRaisedShadowColor
Rail (Selected disabled)	Background color with alpha	∆colorBrandedAffordanceAccessible ∆colorPlatformAlpha400
On/off indicator (accessible variant) (Selected disabled)	Background color with alpha	∆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

Shape

Note: shape is a selection made by the FI within Theme Builder (sharp, soft, round, squircle), and the radius is based on the size of the component. The switch component is considered to be a small component.

Element	Property	Value
Rail	Border radius	∆shapeBrandedSmall

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

Interaction	Steps	Duration	Easing	Notes
Hover select	1a. Fade in	∆motionTimeNano	∆motionTimingFunctionStandard	Fade opacity from 0–100%
Selection trigger	2a.Scale out	∆motionTimeModerate	∆motionTimingFunctionStandard	Scale from 75–125%
	2b. Fade in	∆motionTimeFast	∆motionTimingFunctionStandard	Fade opacity from 50–100%
	2c. Fade out	∆motionTimeFast	∆motionTimingFunctionStandard	Fade opacity from 100–0%

Select

Interaction	Steps	Duration	Easing	Notes	Haptics
Selected state	1a. X position	∆motionTimeExtraFast	∆motionTimingFunctionStandard	Move the knob horizontally from 0px to 52px	Selection click
	1b. Hover X position	∆motionTimeExtraFast	∆motionTimingFunctionStandard	Move the knob hover horizontally from 0px to 52px
Rail transition	1c. State fade	∆motionTimeExtraFast	∆motionTimingFunctionStandard	Fade rail color token into selected state

Select —Accessibility Indicator

Interaction	Steps	Duration	Easing	Notes
Selected state	1a. X position	∆motionTimeExtraFast	∆motionTimingFunctionStandard	Move the knob horizontally from 0px to 52px
Off indicator	1b. X position	∆motionTimeExtraFast	∆motionTimingFunctionStandard	Move the indicator horizontally from 0px to 24px
	1c. Fade out	∆motionTimeExtraFast	∆motionTimingFunctionStandard	Fade opacity from 100–0%
On indicator	1d. X position	∆motionTimeFast	∆motionTimingFunctionStandard	Move the indicator horizontally from -24 to 0px
	1e. Fade in	∆motionTimeFast	∆motionTimingFunctionStandard	Fade opacity from 0–100%

Selected — Hover

Interaction	Steps	Duration	Easing	Notes
Hover select	1a. Fade in	∆motionTimeNano	∆motionTimingFunctionStandard	Fade opacity from 0–100%
Selection trigger	2a.Scale out	∆motionTimeModerate	∆motionTimingFunctionStandard	Scale from 75–125%
Selection trigger	2b. Fade in	∆motionTimeFast	∆motionTimingFunctionStandard	Fade opacity from 50–100%
	2c. Fade out	∆motionTimeFast	∆motionTimingFunctionStandard	Fade opacity from 100–0%

Deselect

Interaction	Steps	Duration	Easing	Notes	Haptics
Deselect	1a. X position	∆motionTimeExtraFast	∆motionTimingFunctionStandard	Move the knob horizontally from 52px to 0px	Selection click
	1b. Hover X position	∆motionTimeExtraFast	∆motionTimingFunctionStandard	Move the knob hover horizontally from 52px to 0px
Rail transition	1c. State fade	∆motionTimeExtraFast	∆motionTimingFunctionStandard	Fade rail color token into inactive state

Deselect — Accessibility Indicator

Interaction	Steps	Duration	Easing	Notes
Selected state	1a. X position	∆motionTimeExtraFast	∆motionTimingFunctionStandard	Move the knob horizontally from 52px to 0px
On indicator	1b. X position	∆motionTimeExtraFast	∆motionTimingFunctionStandard	Move the indicator horizontally from 0px to -24px
	1c. Fade out	∆motionTimeExtraFast	∆motionTimingFunctionStandard	Fade opacity from 100–0%
Off indicator	1d. X position	∆motionTimeFast	∆motionTimingFunctionStandard	Move the indicator horizontally from 24 to 0px
	1e. Fade in	∆motionTimeFast	∆motionTimingFunctionStandard	Fade opacity from 0–100%

Loading — Indeterminate

Interaction	Steps	Duration	Easing	Notes
Knob transition	1a. X position	∆motionTimeExtraFast	∆motionTimingFunctionStandard	Move the knob horizontally from 0px to 52px
Off indicator	1b. X position	∆motionTimeExtraFast	∆motionTimingFunctionStandard	Move the indicator horizontally from 0px to 24px
	1c. Fade out	∆motionTimeExtraFast	∆motionTimingFunctionStandard	Fade opacity from 100–0%
On indicator	1d. X position	∆motionTimeFast	∆motionTimingFunctionStandard	Move the indicator horizontally from -24 to 0px
	1e. Fade in	∆motionTimeFast	∆motionTimingFunctionStandard	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
Selected state	1. State transition	∆motionTimeNano	∆motionTimingFunctionStandard	Fade all parameters to selected state

Developer Docs

Vue Developer Docs

Component documentation coming soon!