Switch

Allow user to toggle between two states.

Figma component (opens in new tab)Storybook documentation (opens in new tab)

React

<Switch id="switch" />

CSS

<div class="switch">
  <input class="switch_input" type="checkbox" name="switch" id="switch" aria-label="Switch">
  <span class="switch_toggle"></span>
</div>

Props

Start label

Start label

React

<Switch startLabel="Start label" id="startLabel"></Switch>

CSS

<div class="switch">
  <p class="text body switch_label">Start label</p>
  <input class="switch_input" type="checkbox" name="startLabel" id="startLabel" aria-label="Switch with a start label">
  <span class="switch_toggle"></span>
</div>

Combine labels

You can combine the startLabel and endLabel props.

End label

End label

React

<Switch endLabel="End label" id="endLabel" />

CSS

<div class="switch">
  <input class="switch_input" type="checkbox" name="endLabel" id="endLabel" aria-label="Switch with an end label">
  <span class="switch_toggle"></span>
  <p class="text body switch_label">End label</p>
</div>

Checked

React

<Switch id="checked" checked />

CSS

<div class="switch">
  <input class="switch_input" type="checkbox" name="checked" id="checked" checked aria-label="Switch checked by default">
  <span class="switch_toggle"></span>
</div>

Disabled

React

<Switch id="disabled" disabled />

CSS

<div class="switch">
  <input class="switch_input" type="checkbox" name="disabled" id="disabled" disabled aria-label="Disabled switch">
  <span class="switch_toggle"></span>
</div>