Switch

How to use switches

Switches are used for binary actions where the action of using the switch should be immediate. They are typically used for ‘on/off’ states.

When using switches:

• Always have a unique label for each switch
• Programmatically connect each label to its corresponding switch
• If you have a list of switches, the switches should work independently from each other, so using one switch shouldn’t change the status of another switch in the list

Types of switches

Transparent

Transparent switches give a simple, clean look.

<Switch
  name="transparent-switch"
  label="Transparent switch"
  defaultChecked
  fullWidth
/>

Outlined

Outlined switches are used to give visual impact and distinction.

<Switch
  name="outlined-switch"
  label="Outlined switch"
  defaultChecked
  fullWidth
  outlined
/>

With text

Switches have visible supporting text to describe the action.

<Switch name="switch-with-text" label="Switch with text" fullWidth />

Standalone

Standalone switches let you remove text for more flexibility with the position of the switch. Make sure that context is provided to the user by the surrounding content of the switch and that the switch has an accessible name.

<React.Fragment>
  <Switch name="switch-with-hidden-label" label="Hidden label" hideLabel />
  <Switch
    name="switch-with-hidden-label-checked"
    label="Hidden label (default checked)"
    defaultChecked
    hideLabel
  />
</React.Fragment>

Copy guidelines

Clearly describe what the switch does, but don't use the words 'on' or 'off'. The visual state communicates whether the switch is on or off. Including on/off text can create more confusion.

If required, you can use supporting text under the label to describe what the switch does, and what state it's currently in.

If required, you can use supporting text under the label to describe what the switch does, and what state it's currently in.

When using switches:

• Start your switch labels with a capital letter
• Don’t use commas or any punctuation at the end of each label
• Don’t use more than three words per label

Was this page helpful?