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

React component <Input/> is available.
It inherits the error property from a Fieldset component and automatically applies the error style.

※ The disabled state is automatically inherited through the native HTML feature.

Q&A

How to customize the bold line that appears when focused?

You can set outline property in CSS.
Though it is recommended to leave it as default for accessibility.