Switch

An on/off control that takes effect at once: a native checkbox with the switch role.

Basic

checked is two-way. A wrapping label toggles it.

Airplane mode checked: false, changes: 0

Code

<Label>
  <Switch checked={state.airplane} />
  Airplane mode
</Label>

Usage

import { Switch } from "@elements/ui/switch";

<Label><Switch checked={settings.airplane} /> Airplane mode</Label>
<Switch checked={settings.wifi} size="sm" attrs={{ "aria-label": "Wi-Fi" }} />

Examples

With a description

The label and description sit beside the switch; the label never changes with the state.

Share across devices

Code

<div class="option">
  <div>
    <Label htmlFor="share">Share across devices</Label>
    <p class="hint" id="share-hint">Focus is shared across devices, and turns off when you leave the app.</p>
  </div>
  <Switch checked={state.share} attrs={{ id: "share", "aria-describedby": "share-hint" }} />
</div>

Size

sm and the default size.

Small Default

Code

<Label><Switch size="sm" checked={state.small} /> Small</Label>
<Label><Switch checked={state.medium} /> Default</Label>

Disabled and invalid

States change color, never size.

Disabled Disabled and on Accept terms and conditions

Code

<Switch disabled />
<Switch disabled checked />
<Switch invalid />

Group

A FieldSet and its legend name a set of switches (APG). attrs.form joins them to a form they sit outside.

Email notifications

Product updates

Weekly digest

Code

<FieldSet>
  <FieldLegend variant="label">Email notifications</FieldLegend>
  <Field orientation="horizontal" label="Product updates" reserveError={false}>
    <Switch checked={state.updates} name="updates" attrs={{ form: "signup" }} />
  </Field>
  <Field orientation="horizontal" label="Weekly digest" reserveError={false}>
    <Switch checked={state.digest} name="digest" uncheckedValue="off" attrs={{ form: "signup" }} />
  </Field>
</FieldSet>

Read only

Focusable and announced, but a click, Space or Enter leaves it as it is.

Backups (managed by your administrator)

Code

<Label><Switch checked readOnly /> Backups (managed by your administrator)</Label>

Required in a form

The browser will not submit until it is on. Enter toggles it like Space. uncheckedValue submits a value while a switch is off.

Code

<form onsubmit={() => submit(state)}>
  <Label><Switch checked={state.terms} required name="terms" /> Accept terms and conditions</Label>
  <Label><Switch name="marketing" value="yes" uncheckedValue="no" /> Marketing email</Label>
  <Button type="submit" variant="primary">Continue</Button>
  <Button type="reset">Reset</Button>
</form>

Choice card

A FieldLabel wrapping a Field makes the whole card toggle the switch.

Share across devices

Focus is shared across devices, and turns off when you leave the app.

Code

<FieldLabel>
  <Field orientation="horizontal" reserveError={false}>
    <FieldContent>
      <FieldTitle>Share across devices</FieldTitle>
      <FieldDescription>Focus is shared across devices, and turns off when you leave the app.</FieldDescription>
    </FieldContent>
    <Switch checked={state.share} />
  </Field>
</FieldLabel>

Cancel a change

onCheckedChange runs before the switch changes and gets details second; details.cancel() keeps it as it was, for a click, Space or Enter.

Public profile checked: false, attempts: 0, last: none

Code

<Switch checked={guard.value} onCheckedChange={(checked, details) => {
  if (!guard.allowed) details.cancel();
}} />

Right to left

The thumb starts at the inline start and slides toward the end.

وضع الطيران

Reference Switch in the manual Every part, attribute, slot, key and data attribute.