Toggle Switch

Toggle provide users with different selection and activation tools.

install	yarn add @clayui/form
version
use	`import {ClayToggle} from '@clayui/form';`

Table of Contents

Example
Behavioral
Checkbox
Radio
Disabled
Composable
With Text
With Icons
Extending Toggles

Example

Snippet

<label className="toggle-switch">
  <span className="toggle-switch-check-bar">
    <input className="toggle-switch-check" role="switch" type="checkbox" />
    <span aria-hidden="true" className="toggle-switch-bar">
      <span className="toggle-switch-handle"></span>
    </span>
  </span>
</label>
<label className="toggle-switch">
  <span className="toggle-switch-check-bar">
    <input className="toggle-switch-check" role="switch" type="checkbox" />
    <span aria-hidden="true" className="toggle-switch-bar">
      <span
        className="toggle-switch-handle"
        data-label-off=""
        data-label-on="LIVE"
      >
        <span className="button-icon button-icon-on toggle-switch-icon">
          <svg
            className="lexicon-icon lexicon-icon-live"
            focusable="false"
            role="presentation"
          >
            <use href="/icons.svg#live"></use>
          </svg>
        </span>
        <span className="button-icon button-icon-off toggle-switch-icon">
          <svg
            className="lexicon-icon lexicon-icon-staging"
            focusable="false"
            role="presentation"
          >
            <use href="/icons.svg#staging"></use>
          </svg>
        </span>
      </span>
    </span>
  </span>
</label>

Behavioral

You may want the Toggle Switch to behave with a Radio or Checkbox but have the appearance of a switch.

Checkbox

Snippet

<label className="toggle-switch">
  <span className="toggle-switch-check-bar">
    <input className="toggle-switch-check" role="switch" type="checkbox" />
    <span aria-hidden="true" className="toggle-switch-bar">
      <span className="toggle-switch-handle"></span>
    </span>
  </span>
</label>

Radio

Snippet

<label className="toggle-switch">
  <span className="toggle-switch-check-bar">
    <input
      className="toggle-switch-check"
      name="toggleSwitchRadio1"
      role="radio"
      type="radio"
      value="option1"
    />
    <span aria-hidden="true" className="toggle-switch-bar">
      <span className="toggle-switch-handle"></span>
    </span>
  </span>
</label>
<label className="toggle-switch">
  <span className="toggle-switch-check-bar">
    <input
      className="toggle-switch-check"
      name="toggleSwitchRadio1"
      role="radio"
      type="radio"
      value="option2"
    />
    <span aria-hidden="true" className="toggle-switch-bar">
      <span className="toggle-switch-handle"></span>
    </span>
  </span>
</label>
<label className="toggle-switch">
  <span className="toggle-switch-check-bar">
    <input
      className="toggle-switch-check"
      name="toggleSwitchRadio1"
      role="radio"
      type="radio"
      value="option3"
    />
    <span aria-hidden="true" className="toggle-switch-bar">
      <span className="toggle-switch-handle"></span>
    </span>
  </span>
</label>

Disabled

Snippet

<label className="toggle-switch">
  <span className="toggle-switch-check-bar">
    <input disabled class="toggle-switch-check" role="switch" type="checkbox" />
    <span aria-hidden="true" className="toggle-switch-bar">
      <span className="toggle-switch-handle"></span>
    </span>
  </span>
</label>
<label className="toggle-switch">
  <span className="toggle-switch-check-bar">
    <input
      disabled
      checked
      className="toggle-switch-check"
      name="toggleSwitchRadio1"
      role="radio"
      type="radio"
      value="option1"
    />
    <span aria-hidden="true" className="toggle-switch-bar">
      <span className="toggle-switch-handle"></span>
    </span>
  </span>
</label>

Composable

With Text

You can display additional text with the toggle switch by adding the .toggle-switch-text class to the text element. Use the .toggle-switch-text-left and .toggle-switch-text-right classes to position the text on the left and right side of the toggle switch, respectively.

Adding Required TextRequired *

Required Text on RightRequired *

Required Text on LeftRequired *

The Kitchen SinkTop TextErrorRequired *Bottom Text

Snippet

<label className="toggle-switch">
  <span className="toggle-switch-label">Adding Required Text</span>
  <span className="toggle-switch-text">Required *</span>
  <span className="toggle-switch-check-bar">
    <input className="toggle-switch-check" role="switch" type="checkbox" />
    <span aria-hidden="true" className="toggle-switch-bar">
      <span
        className="toggle-switch-handle"
        data-label-off=""
        data-label-on="ON"
      >
      </span>
    </span>
  </span>
</label>
<label className="toggle-switch">
  <span className="toggle-switch-label">Adding Required Text</span>
  <span className="toggle-switch-check-bar">
    <input className="toggle-switch-check" role="switch" type="checkbox" />
    <span aria-hidden="true" className="toggle-switch-bar">
      <span
        className="toggle-switch-handle"
        data-label-off=""
        data-label-on="ON"
      >
      </span>
    </span>
  </span>
  <span className="toggle-switch-text">Required *</span>
</label>
<label className="toggle-switch">
  <span className="toggle-switch-label">Required Text on Right</span>
  <span className="toggle-switch-check-bar">
    <input className="toggle-switch-check" role="switch" type="checkbox" />
    <span aria-hidden="true" className="toggle-switch-bar">
      <span
        className="toggle-switch-handle"
        data-label-off=""
        data-label-on="ON"
      >
      </span>
    </span>
  </span>
  <span className="toggle-switch-text toggle-switch-text-right"
    >Required *</span
  >
</label>
<label className="toggle-switch">
  <span className="toggle-switch-label">Required Text on Left</span>
  <span className="toggle-switch-text toggle-switch-text-left">Required *</span>
  <span className="toggle-switch-check-bar">
    <input className="toggle-switch-check" role="switch" type="checkbox" />
    <span aria-hidden="true" className="toggle-switch-bar">
      <span
        className="toggle-switch-handle"
        data-label-off=""
        data-label-on="ON"
      >
      </span>
    </span>
  </span>
</label>
<label className="toggle-switch">
  <span className="toggle-switch-label">The Kitchen Sink</span>
  <span className="toggle-switch-text">Top Text</span>
  <span className="toggle-switch-text toggle-switch-text-left">Error</span>
  <span className="toggle-switch-check-bar">
    <input className="toggle-switch-check" role="switch" type="checkbox" />
    <span aria-hidden="true" className="toggle-switch-bar">
      <span
        className="toggle-switch-handle"
        data-label-off="OFF"
        data-label-on="ON"
      >
      </span>
    </span>
  </span>
  <span className="toggle-switch-text toggle-switch-text-right"
    >Required *</span
  >
  <span className="toggle-switch-text">Bottom Text</span>
</label>

With Icons

Add <span className="button-icon button-icon-on icon-volume-up toggle-switch-icon"/> to add an icon to the switch for the on position.

Add <span className="button-icon button-icon-off icon-volume-off toggle-switch-icon"/> to add an icon to the switch for the off position.

Toggle Switch with data-label-on

Toggle Switch with data-label on and data-label-off

Alternatively, you can add <span className="icon-ok toggle-switch-icon toggle-switch-icon-on"/> to add an icon to the switch for the on position.

Alternatively, you can add <span className="icon-remove toggle-switch-icon toggle-switch-icon-off"/> to add an icon to the switch for the off position.

Snippet

<label className="toggle-switch">
  <span className="toggle-switch-check-bar">
    <input className="toggle-switch-check" role="switch" type="checkbox" />
    <span aria-hidden="true" className="toggle-switch-bar">
      <span className="toggle-switch-handle">
        <span className="toggle-switch-icon toggle-switch-icon-on">
          <svg
            className="lexicon-icon lexicon-icon-check"
            focusable="false"
            role="presentation"
          >
            <use href="/icons.svg#check" />
          </svg>
        </span>
        <span className="toggle-switch-icon toggle-switch-icon-off">
          <svg
            className="lexicon-icon lexicon-icon-times"
            focusable="false"
            role="presentation"
          >
            <use href="/icons.svg#times" />
          </svg>
        </span>
      </span>
    </span>
  </span>
</label>

Extending Toggles

This section explains how to customize toggles. Use at your own risk.

Customize the toggle-switch button in the off position with .toggle-switch-check:empty ~ .toggle-switch-bar:after {} .
Customize the toggle-switch button icon in the off position with .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-icon.button-icon {} .
Customize the toggle-switch bar in the off position with .toggle-switch-check:empty ~ .toggle-switch-bar:before {} .
Customize the toggle-switch bar icon in the off position with .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-icon-off {} .
Customize the toggle-switch button in the on position with .toggle-switch-check:checked ~ .toggle-switch-bar:after {} .
Customize the toggle-switch button icon in the on position with .toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-icon.button-icon.
Customize the toggle-switch bar in the on position with .toggle-switch-check:checked ~ .toggle-switch-bar:before {} .
Customize the toggle-switch bar icon in the on position with .toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-icon-on {} .

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 12, 2025 at 7:56:02 PM

Table of Contents

Example
Behavioral
Checkbox
Radio
Disabled
Composable
With Text
With Icons
Extending Toggles