Switches
Turn a setting on or off with a labeled toggle.
Basic example
Switches turn a setting on or off. Click the track, drag the thumb to either side, or focus the checkbox and press Space.
<!-- Switch -->
<div class="switch">
<label>
Off
<input type="checkbox">
<span class="lever"></span>
On
</label>
</div>
<!-- Disabled Switch -->
<div class="switch">
<label>
Off
<input type="checkbox" disabled>
<span class="lever"></span>
On
</label>
</div>Setup
Start with the kmaterialize CSS and JavaScript from Getting started, then follow the component setup below.
Place a native checkbox and a <span class="lever"> inside the label of a .switch. Load kmaterialize’s JavaScript to enable dragging; the behavior attaches automatically, including to switches added later.
import 'kmaterialize/dist/css/materialize.css';
import 'kmaterialize';No per-switch initialization is needed. Listen to the checkbox’s native change event when applying a setting.
Examples and variants
Icon inside the thumb
The circle shows a check when on and a cross when off. Click or drag the thumb, or focus the checkbox and press Space to toggle.
<div class="switch switch-with-icon">
<label>
Off
<input type="checkbox" aria-label="Enable notifications" checked>
<span class="lever" aria-hidden="true"></span>
On
</label>
</div>Add switch-with-icon to a standard Materialize switch and load the Material Icons font. The icon styling is included in kmaterialize. The icons are decorative; the checkbox provides the accessible name and checked state.
Custom Material Icons
Try a notification switch: a muted bell when off and a ringing bell when on. Set --switch-icon-off and --switch-icon-on to quoted Material Icons names to choose your own icons.
<div class="switch switch-with-icon"
style="--switch-icon-off: 'notifications_off'; --switch-icon-on: 'notifications_active';">
<label>
Notifications
<input type="checkbox" aria-label="Enable notifications">
<span class="lever" aria-hidden="true"></span>
</label>
</div>These properties are built into kmaterialize's switch-with-icon variant. Load the Material Icons font; no extra CSS or JavaScript is needed.
Validation
A switch uses a native checkbox. Use required only when the on state is necessary to proceed; an optional preference should accept either state.
These previews keep their error state visible. In your form, show errors after checking a field or submitting, then clear them when the value is valid.
For text fields, use .input-field.error, aria-invalid="true", and a message linked with aria-describedby. Remove the error state when resolved. Use aria-live="polite" for messages updated dynamically.
Required activation
error Enable project backups before starting this job.
<div class="switch">
<label>Off
<input id="validation-switch" type="checkbox" required aria-label="Enable project backups" aria-invalid="true" aria-describedby="validation-switch-error">
<span class="lever"></span> On
</label>
</div>
<p id="validation-switch-error" class="supporting-text error-text"><i class="material-icons" aria-hidden="true">error</i> Enable project backups before starting this job.</p>Reference
Attributes
| Attribute | Purpose |
|---|---|
name | Key used when submitting the form. |
value | Value submitted when the option is checked. |
checked | Initial selection. Read the input’s checked property for its current state. |
disabled | Prevents interaction and excludes the control from form submission. |
required | Requires this checkbox to be checked, or an option to be selected in a radio group. |
Keyboard and accessibility
Use Tab to focus the switch and Space to toggle it. Give the setting a clear label so its meaning remains understandable in either state.
Dragging
The thumb follows a horizontal mouse, pen, or touch drag. Release past the midpoint to turn the switch on, or before it to turn it off. Right-to-left layouts mirror this direction. The checkbox value changes only on release, emitting the usual native events when its state changes.
Press Escape to cancel a drag. Disabled switches stay inactive, and vertical touch gestures can scroll the page. Clicking still works when only the stylesheet is loaded.