Wrap an <input type="checkbox"> in a
<label class="switch">. Put the label text next
to the input as a sibling. You do not need a .lever.
Switches are CSS only, so there is no JavaScript component and
nothing to AutoInit.
Tokens follow the
M3 switch spec.
The track is 52×32dp. Unselected is
surface-container-highest with a 2dp outline and
a 16dp handle. Selected is a primary track and a
24dp on-primary handle. The state layer is 40dp at
8% hover and 10% focus. The touch target is 48dp. The label is
body-large / on-surface. Disabled is
38%.
<label class="switch">
<input type="checkbox">
Wi-Fi
</label>
<label class="switch">
<input type="checkbox" checked>
Bluetooth
</label>
<label class="switch">
<input type="checkbox" disabled>
Airplane mode
</label>
Hide on/off captions and name the control itself. The captions are
decoration. Left as bare text, they become part of the label, and
the switch announces itself as "Off On". A switch whose only text is
a caption needs an aria-label, because hiding the
captions leaves it with no name at all.
<label class="switch">
<span aria-hidden="true">Off</span>
<input type="checkbox" aria-label="Dark mode">
<span aria-hidden="true">On</span>
</label>