Materialize provides custom switches. A switch has the markup of a custom checkbox but uses the .switch class to render a toggle switch.
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.
<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>Materialize 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 |
Fancy larger or smaller switches? Add .switch-lg or .switch-sm for additional sizes.
<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>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>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.
<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>| 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 |