Switches

Materio provides custom switches. A switch has the markup of a custom checkbox but uses the .switch class to render a toggle switch.

Switches Type

Default

The default switch has a solid background style and it comes with two different shapes Round & Square. Use .switch for default round switches. Use .switch.switch-square for default square switch.

Default
Square
<div class="row row-bordered g-0">
  <div class="col-sm-6 p-6">
    <div class="text-light small fw-medium mb-4">Default</div>
    <label class="switch">
      <input type="checkbox" class="switch-input" />
      <span class="switch-toggle-slider">
        <span class="switch-on"></span>
        <span class="switch-off"></span>
      </span>
      <span class="switch-label">Default</span>
    </label>
  </div>
  <div class="col-sm-6 p-6">
    <div class="text-light small fw-medium mb-4">Square</div>
    <label class="switch switch-square">
      <input type="checkbox" class="switch-input" />
      <span class="switch-toggle-slider">
        <span class="switch-on"></span>
        <span class="switch-off"></span>
      </span>
      <span class="switch-label">Square</span>
    </label>
  </div>
</div>

Variations

Materio includes several predefined variations of switches.

Default

<!-- Primary -->
<label class="switch switch-primary">
  <input type="checkbox" class="switch-input" checked />
  <span class="switch-toggle-slider">
    <span class="switch-on"></span>
    <span class="switch-off"></span>
  </span>
  <span class="switch-label">Primary</span>
</label>

<!-- Secondary -->
<label class="switch switch-secondary">
  <input type="checkbox" class="switch-input" checked />
  <span class="switch-toggle-slider">
    <span class="switch-on"></span>
    <span class="switch-off"></span>
  </span>
  <span class="switch-label">Secondary</span>
</label>

<!-- Success -->
<label class="switch switch-success">
  <input type="checkbox" class="switch-input" checked />
  <span class="switch-toggle-slider">
    <span class="switch-on"></span>
    <span class="switch-off"></span>
  </span>
  <span class="switch-label">Success</span>
</label>

<!-- Danger -->
<label class="switch switch-danger">
  <input type="checkbox" class="switch-input" checked />
  <span class="switch-toggle-slider">
    <span class="switch-on"></span>
    <span class="switch-off"></span>
  </span>
  <span class="switch-label">Danger</span>
</label>

<!-- Warning -->
<label class="switch switch-warning">
  <input type="checkbox" class="switch-input" checked />
  <span class="switch-toggle-slider">
    <span class="switch-on"></span>
    <span class="switch-off"></span>
  </span>
  <span class="switch-label">Warning</span>
</label>

<!-- Info -->
<label class="switch switch-info">
  <input type="checkbox" class="switch-input" checked />
  <span class="switch-toggle-slider">
    <span class="switch-on"></span>
    <span class="switch-off"></span>
  </span>
  <span class="switch-label">Info</span>
</label>

<!-- Dark -->
<label class="switch switch-dark">
  <input type="checkbox" class="switch-input" checked />
  <span class="switch-toggle-slider">
    <span class="switch-on"></span>
    <span class="switch-off"></span>
  </span>
  <span class="switch-label">Dark</span>
</label>
Class Value
class="switch switch-{value}" primary | secondary | success | danger | warning | info | light | dark

Size

Fancy larger or smaller switches? Add .switch-lg or .switch-sm for additional sizes.

Default


Square


<div class="row">
  <div class="col-sm-6 p-6">
    <div class="text-light small fw-medium">Default</div>
    <div class="demo-vertical-spacing">
      <label class="switch switch-sm">
        <input type="checkbox" class="switch-input" />
        <span class="switch-toggle-slider">
          <span class="switch-on"></span>
          <span class="switch-off"></span>
        </span>
        <span class="switch-label">Small</span>
      </label>

      <br />

      <label class="switch">
        <input type="checkbox" class="switch-input" />
        <span class="switch-toggle-slider">
          <span class="switch-on"></span>
          <span class="switch-off"></span>
        </span>
        <span class="switch-label">Default</span>
      </label>

      <br />

      <label class="switch switch-lg">
        <input type="checkbox" class="switch-input" />
        <span class="switch-toggle-slider">
          <span class="switch-on"></span>
          <span class="switch-off"></span>
        </span>
        <span class="switch-label">Large</span>
      </label>
    </div>
  </div>
  <div class="col-sm-6 p-6">
    <div class="text-light small fw-medium">Square</div>
    <div class="demo-vertical-spacing">
      <label class="switch switch-square switch-sm">
        <input type="checkbox" class="switch-input" />
        <span class="switch-toggle-slider">
          <span class="switch-on"></span>
          <span class="switch-off"></span>
        </span>
        <span class="switch-label">Small</span>
      </label>

      <br />

      <label class="switch switch-square">
        <input type="checkbox" class="switch-input" />
        <span class="switch-toggle-slider">
          <span class="switch-on"></span>
          <span class="switch-off"></span>
        </span>
        <span class="switch-label">Default</span>
      </label>

      <br />

      <label class="switch switch-square switch-lg">
        <input type="checkbox" class="switch-input" />
        <span class="switch-toggle-slider">
          <span class="switch-on"></span>
          <span class="switch-off"></span>
        </span>
        <span class="switch-label">Large</span>
      </label>
    </div>
  </div>
</div>

States

Disabled

Make switches look inactive by adding the disabled boolean attribute to the <input> inside .switch.


<label class="switch mb-4">
  <input type="checkbox" class="switch-input" disabled />
  <span class="switch-toggle-slider">
    <span class="switch-on"></span>
    <span class="switch-off"></span>
  </span>
  <span class="switch-label">Default - OFF</span>
</label>

<br />

<label class="switch">
  <input type="checkbox" class="switch-input" checked disabled />
  <span class="switch-toggle-slider">
    <span class="switch-on"></span>
    <span class="switch-off"></span>
  </span>
  <span class="switch-label">Default - ON</span>
</label>

Validation

Add validations states to switches by adding bootstrap .is-valid or .is-invalid class. Custom switch also support jQuery Validation states. 

<div class="mb-3">
  <label class="switch">
    <input type="checkbox" class="switch-input is-valid" checked />
    <span class="switch-toggle-slider">
      <span class="switch-on"></span>
      <span class="switch-off"></span>
    </span>
    <span class="switch-label">Valid</span>
  </label>
</div>

<div class="has-error">
  <label class="switch">
    <input type="checkbox" class="switch-input is-invalid" checked />
    <span class="switch-toggle-slider">
      <span class="switch-on"></span>
      <span class="switch-off"></span>
    </span>
    <span class="switch-label">Invalid</span>
  </label>
</div>

Stacked Radio

Wrap switches with .switches-stacked class for stacked/multiple switches options.

Radio (switch) are normally presented in radio switch groups. Only one switch in a group can be selected at a time. Use same name attribute with all the <input>s in .switch for a single group.

Default
Square
<div class="row row-bordered g-0">
  <div class="col-sm-6 p-6">
    <div class="text-light small fw-medium mb-4">Default</div>
    <div class="switches-stacked">
      <label class="switch">
        <input type="radio" class="switch-input" name="switches-stacked-radio" checked />
        <span class="switch-toggle-slider">
          <span class="switch-on"></span>
          <span class="switch-off"></span>
        </span>
        <span class="switch-label">Option 1</span>
      </label>
      <label class="switch">
        <input type="radio" class="switch-input" name="switches-stacked-radio" />
        <span class="switch-toggle-slider">
          <span class="switch-on"></span>
          <span class="switch-off"></span>
        </span>
        <span class="switch-label">Option 2</span>
      </label>
      <label class="switch">
        <input type="radio" class="switch-input" name="switches-stacked-radio" />
        <span class="switch-toggle-slider">
          <span class="switch-on"></span>
          <span class="switch-off"></span>
        </span>
        <span class="switch-label">Option 3</span>
      </label>
    </div>
  </div>

  <div class="col-sm-6 p-6">
    <div class="text-light small fw-medium mb-4">Square</div>
    <div class="switches-stacked">
      <label class="switch switch-square">
        <input type="radio" class="switch-input" name="switches-square-stacked-radio" checked />
        <span class="switch-toggle-slider">
          <span class="switch-on"></span>
          <span class="switch-off"></span>
        </span>
        <span class="switch-label">Option 1</span>
      </label>
      <label class="switch switch-square">
        <input type="radio" class="switch-input" name="switches-square-stacked-radio" />
        <span class="switch-toggle-slider">
          <span class="switch-on"></span>
          <span class="switch-off"></span>
        </span>
        <span class="switch-label">Option 2</span>
      </label>
      <label class="switch switch-square">
        <input type="radio" class="switch-input" name="switches-square-stacked-radio" />
        <span class="switch-toggle-slider">
          <span class="switch-on"></span>
          <span class="switch-off"></span>
        </span>
        <span class="switch-label">Option 3</span>
      </label>
    </div>
  </div>
</div>

Variables

Variable Description
$switch-font-size Variable for switch font size
$switch-border-radius Variable for switch border radius
$switch-width Variable for default switch width
$switch-width-sm Variable for small switch width
$switch-width-lg Variable for large switch width
$switch-height Variable for large switch height
$switch-height-sm Variable for small switch height
$switch-height-lg Variable for large switch height
$switch-label-font-size Variable for default switch label font(icon) size
$switch-label-font-size-sm Variable for small switch label font(icon) size
$switch-label-font-size-lg Variable for large switch label font(icon) size
$switch-label-line-height Variable for default switch label line height
$switch-label-line-height-sm Variable for small switch label line height
$switch-label-line-height-lg Variable for large switch label line height
$switch-spacer-x Variable for switch horizontal spacing
$switch-spacer-y Variable for switch vertical spacing (.switches-stacked)
$switch-gutter Variable for switch gutter width
$switch-inner-spacer Variable for switch inner space
$switch-square-border-radius Variable for square switch border radius
$switch-label-color Variable for switch label color
$switch-label-disabled-color Variable for disabled switch label color
$switch-off-color Variable for off switch color
$switch-off-bg Variable for off switch background color
$switch-holder-bg Variable for switch holder color
$switch-holder-shadow Variable for switch holder shadow
© 2017- ThemeSelection, Hand-crafted & Made with ❤️