Switch

The switch turns a setting on or off with immediate effect, like enabling notifications. For options that are submitted with a form, reach for the checkbox instead.

<div class="field field-horizontal">
  <input type="checkbox" role="switch" class="switch" id="airplane-mode" />
  <label class="label" for="airplane-mode">Airplane Mode</label>
</div>

Usage

Add the switch class to an <input type="checkbox"> with role="switch", so it looks and announces like a toggle.

Class	Description
`switch`	Add to an `<input type="checkbox" role="switch">`
`switch-sm`	Add to `switch` for a smaller size

<input type="checkbox" role="switch" class="switch" id="my-switch" />
<label class="label" for="my-switch">Airplane Mode</label>

Examples

Description

Pair the switch with a label and description in a horizontal field.

<div class="field field-horizontal">
  <div class="field-content">
    <label class="label" for="switch-focus-mode">Share across devices</label>
    <p class="field-description">
      Focus is shared across devices, and turns off when you leave the app.
    </p>
  </div>
  <input type="checkbox" role="switch" class="switch" id="switch-focus-mode" />
</div>

Choice card

Wrap the field in a label and the whole card toggles the switch.

<div class="field-group gap-3">
  <label class="label" for="switch-share">
    <div class="field field-horizontal">
      <div class="field-content">
        <span class="field-title">Share across devices</span>
        <p class="field-description">
          Focus is shared across devices, and turns off when you leave the app.
        </p>
      </div>
      <input type="checkbox" role="switch" class="switch" id="switch-share" />
    </div>
  </label>
  <label class="label" for="switch-notifications">
    <div class="field field-horizontal">
      <div class="field-content">
        <span class="field-title">Enable notifications</span>
        <p class="field-description">
          Receive notifications when focus mode is enabled or disabled.
        </p>
      </div>
      <input
        type="checkbox"
        role="switch"
        class="switch"
        id="switch-notifications"
        checked
      />
    </div>
  </label>
</div>

Group

Stack switches in a field set to build a settings group.

<fieldset class="field-set">
  <legend class="field-legend">Notifications</legend>
  <p class="field-description">Manage when you'll receive notifications.</p>
  <div class="field-group">
    <div class="field field-horizontal">
      <div class="field-content">
        <label class="label" for="switch-disputes">Disputes</label>
        <p class="field-description">
          Receive a notification if a payment is disputed by a customer.
        </p>
      </div>
      <input
        type="checkbox"
        role="switch"
        class="switch"
        id="switch-disputes"
        checked
      />
    </div>
    <div class="field field-horizontal">
      <div class="field-content">
        <label class="label" for="switch-fraudulent">Fraudulent payments</label>
        <p class="field-description">
          Receive a notification when Radar detects a fraudulent payment.
        </p>
      </div>
      <input
        type="checkbox"
        role="switch"
        class="switch"
        id="switch-fraudulent"
        checked
      />
    </div>
    <div class="field field-horizontal">
      <div class="field-content">
        <label class="label" for="switch-successful">Successful payments</label>
        <p class="field-description">
          Receive a notification for every payment that is processed on your
          account.
        </p>
      </div>
      <input
        type="checkbox"
        role="switch"
        class="switch"
        id="switch-successful"
      />
    </div>
  </div>
</fieldset>

Disabled

Add disabled and the label dims with the switch.

<div class="field field-horizontal">
  <input
    type="checkbox"
    role="switch"
    class="switch"
    id="switch-disabled"
    disabled
  />
  <label class="label" for="switch-disabled">Disabled</label>
</div>

Invalid

Set aria-invalid on the switch for the error state.

<div class="field field-horizontal">
  <div class="field-content">
    <label class="label" for="switch-terms">Accept terms and conditions</label>
    <p class="field-description">
      You must accept the terms and conditions before continuing with your
      registration.
    </p>
  </div>
  <input
    type="checkbox"
    role="switch"
    class="switch"
    id="switch-terms"
    aria-invalid="true"
  />
</div>

Size

Add switch-sm for a smaller size.

<div class="field-group gap-3">
  <div class="field field-horizontal">
    <input
      type="checkbox"
      role="switch"
      class="switch switch-sm"
      id="switch-size-sm"
    />
    <label class="label" for="switch-size-sm">Small</label>
  </div>
  <div class="field field-horizontal">
    <input
      type="checkbox"
      role="switch"
      class="switch"
      id="switch-size-default"
    />
    <label class="label" for="switch-size-default">Default</label>
  </div>
</div>