Switch

A Switch allows users to toggle between two mutually exclusive options, such as “On/Off” and “Show/Hide.”

• Interactive Playground
• Anatomy
• States
• Behavior
• Specs
• Keyboard Interactions
• Related Content

The Interactive Playground allows you to experiment with various switch styles and features. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

<div class="neo-form-control">
  <label
    class="neo-switch"
    for="switch"
  >
    <input
      id="switch"
      type="checkbox"
      role="switch"
    >
    <i class="neo-switch__icon">
    </i>
    Option
  </label>
</div>

<Switch>Option</Switch>

A switch can be built with or without labels. The label can be positioned to the left or right side of the switch.

• Track:

  This shows the current position of the handle (left or right).

• Handle with Icon:

  The moveable piece of the switch. Move it to the right to enable the function, or to the left to disable it.

• Label:

  The text description of the function that is controlled by the switch.

A switch can exist in one of four states.

Off

On

Off - Disabled

On - Disabled

• Off:

  With the switch in this position (left) the function is disabled/inactive.

• On:

  In this position (right), the function is enabled/active.

• On Disabled:

  This switch is unavailable (greyed out) and the function is currently enabled/active.

• Off Disabled:

  This switch is unavailable and the function is currently disabled/inactive.

Switches are used to visually convey the state of a function and allow the user to change the state of that function. This will change the way the program operates, such as turning on dark mode or disabling notifications.

When To Use

Use a switch to toggle a function between two opposing states (e.g. on/off). The difference between a Switch and a Checkbox is that a Switch will trigger the change immediately when toggled. A Checkbox is part of a two-step process where the operator sets the checkbox state, then selects a submit function before the item becomes active.

DO: Use a switch for turning features on and off.

DON'T: Do not use a switch for selecting items. Use the Checkbox instead.

DO: Add a category label to a group of related switches to connect them together.

DON'T: Do not add category labels to unrelated switches.

Label Location

The switch should have a label that describes the function it controls. The label can appear to the left or to the right of the track.

Right Label

left Label

Each switch track has a height of 16 pixels and a width of 32 pixels. The switch handle is 14 pixels in diameter. The padding between the track and the label is 8 pixels.

Switch Sizing

Switch Padding

Accessibility requires that each item on the screen is reachable using the keyboard alone. The mouse is not always an option for some users. Keyboard navigation employs the following shortcuts.