Switches

Use when the change applies immediately. For form submissions, prefer a checkbox.

Examples

Default

Vanilla CSS

<input type="checkbox" role="switch" class="switch" />
<input type="checkbox" role="switch" class="switch" checked />

React

<Switch />
<Switch defaultChecked />

Disabled

Vanilla CSS

<input type="checkbox" role="switch" class="switch" disabled />
<input type="checkbox" role="switch" class="switch" disabled checked />

React

<Switch disabled />
<Switch disabled defaultChecked />

Inside a Field

.field-row lays the switch and label out on one line; the default .field stacks vertically.

Email notifications

Vanilla CSS

<div class="field field-row">
  <input type="checkbox" role="switch" class="switch" checked />
  <label class="field-label">Email notifications</label>
</div>

React

<Field name="notify" className="field-row">
  <Switch defaultChecked />
  <Field.Label>Email notifications</Field.Label>
</Field>