Switch · Enma

Live demo

Rest timerHapticsSync over cellular

How to use it

An on/off setting that applies immediately.

Provide label, and checked/onChange or defaultChecked.
On uses --e-primary; the thumb springs across.

Don't: use a switch for something that needs a Save button (use Checkbox).

In every theme

Follows the mode picked in the header.

Code

React

import { Switch } from 'enma/react';

<Switch label="Rest timer" checked={restTimer} onChange={(event) => setRestTimer(event.target.checked)} />

Plain HTML

<label class="e-switch">
  <input class="e-switch__input" type="checkbox" role="switch" checked>
  <span class="e-switch__track" aria-hidden="true"><span class="e-switch__thumb"></span></span>
  <span>Rest timer</span>
</label>

Props

`SwitchProps`

Also accepts every attribute of React.InputHTMLAttributes<HTMLInputElement>.

Props of SwitchProps
Prop	Type	Default	Description
`label`	React.ReactNode