Component
Switch
On and off, with the same soft travel.
Classes
| Class | Type | |
|---|---|---|
| toggle | Component | The label. |
| toggle-track | Part | The track. |
| toggle-thumb | Part | The thumb. It keeps the noise when it is white. |
| toggle-sm | Size | Small. |
| toggle-lg | Size | Large. |
| primary | Color | Indigo by default. Used when you set no color. |
| secondary | Color | Pink by default. |
| tertiary | Color | Teal by default. |
| neutral | Color | Gray by default. |
| success | Color | Green by default. |
| error | Color | Red by default. |
| warning | Color | Amber by default. |
| info | Color | Sky by default. |
On and off
role="switch" is what makes the checkbox a switch for assistive tech.
<label class="toggle primary">
<input type="checkbox" role="switch" checked>
<span class="toggle-track"><span class="toggle-thumb"></span></span>
Notifications
</label>Colors
<label class="toggle primary">
<input type="checkbox" role="switch" checked>
<span class="toggle-track"><span class="toggle-thumb"></span></span>
Primary
</label>
<label class="toggle secondary">
<input type="checkbox" role="switch" checked>
<span class="toggle-track"><span class="toggle-thumb"></span></span>
Secondary
</label>
<label class="toggle tertiary">
<input type="checkbox" role="switch" checked>
<span class="toggle-track"><span class="toggle-thumb"></span></span>
Tertiary
</label>
<label class="toggle neutral">
<input type="checkbox" role="switch" checked>
<span class="toggle-track"><span class="toggle-thumb"></span></span>
Neutral
</label>
<label class="toggle success">
<input type="checkbox" role="switch" checked>
<span class="toggle-track"><span class="toggle-thumb"></span></span>
Success
</label>
<label class="toggle error">
<input type="checkbox" role="switch" checked>
<span class="toggle-track"><span class="toggle-thumb"></span></span>
Error
</label>
<label class="toggle warning">
<input type="checkbox" role="switch" checked>
<span class="toggle-track"><span class="toggle-thumb"></span></span>
Warning
</label>
<label class="toggle info">
<input type="checkbox" role="switch" checked>
<span class="toggle-track"><span class="toggle-thumb"></span></span>
Info
</label>Sizes
<label class="toggle toggle-sm">
<input type="checkbox" role="switch" checked>
<span class="toggle-track"><span class="toggle-thumb"></span></span>
Small
</label>