Switch

.switch makes input[type="checkbox"] look like a switch.

Applicable Elements

• input[type="checkbox"]

Basic Usage

<label class="label">
  Use wasabi
  <input class="switch" type="checkbox" />
</label>

<div>
  <label class="label" for="sushi">Sushi mode</label>
  <input class="switch" type="checkbox" id="sushi" checked />
</div>

States

<label class="label error">
  Use wasabi
  <input class="switch error" type="checkbox" />
</label>

<label class="label">
  Sushi mode
  <input class="switch" type="checkbox" disabled checked />
</label>

React component Advanced

<Switch/> renders a single <input class="switch" type="checkbox" /> element.

It inherits the error property from a Fieldset component and automatically applies the error style.

Q&A

How do I customize the outline shown on focus?

You can set the outline property in CSS.
However, we recommend keeping the default outline for accessibility.