Switch

Use the Switch Component to allow the user make a selection, which most often expresses turning on/off a configuration in a list of settings. The Switch is visually identical to the Ignite UI for Angular Switch Component

Switch Demo

Interaction State

The Switch can be inserted in an enabled or disabled state.

Layout Template

In Figma and Sketch, the Switch supports label position variants where the Switch label is placed after or before the Switch element. In Adobe XD, we are using Stacks to allow you to change the label and switch positions at design time simply by dragging it to the left or right of the switch visual.

State

The Switch provides on and off selection states. In Figma, you can select the properties from the right sidebar. In Sketch, this is achieved with Symbol Overrides, while in Adobe XD, we are using the Component States paradigm to let you easily switch between states.

Styling

The Switch comes with styling flexibility through the available options for the Thumb and Track colors, as well as changing the Label text color.

Usage

Use the same or very similar colors for the Switch Thumb and Track.

Do	Don't