← Specimen

Controls

switches

Variants

<label for="switch-1">
    <input id="switch-1" type="checkbox" class="switch">
</label>
<label for="switch-2">
    <input id="switch-2" type="checkbox" class="switch white">
</label>
<label for="switch-3">
    <input disabled id="switch-3" type="checkbox" class="switch white">
</label>
<label for="switch-4" class="relative icon-switch-wrapper">
    <input type="checkbox" name="switch-4" id="switch-4" class="switch icon-switch" role="switch" aria-label="Switch view">
    <svg class="icon" aria-hidden="true">...</svg>
    <svg class="icon" aria-hidden="true">...</svg>
</label>

Checked

<label for="switch-5">
    <input checked="checked" id="switch-5" type="checkbox" class="switch">
</label>
<label for="switch-6">
    <input checked="checked" id="switch-6" type="checkbox" class="switch white">
</label>
<label for="switch-7">
    <input checked="checked" disabled id="switch-7" type="checkbox" class="switch white">
</label>
<label for="switch-8" class="relative icon-switch-wrapper">
    <input type="checkbox" checked="checked" name="switch-4" id="switch-8" class="switch icon-switch" role="switch" aria-label="Switch view">
    <svg class="icon" aria-hidden="true">...</svg>
    <svg class="icon" aria-hidden="true">...</svg>
</label>

Checkboxes

Variants

<label for="checkbox-1" class="label">
    <input type="checkbox" name="checkbox-1" id="checkbox-1" class="checkbox">
    Checkbox
</label>
<label for="checkbox-2" class="label">
    <input type="checkbox" name="checkbox-2" id="checkbox-2" class="checkbox" checked="checked">
    Checkbox
</label>
<label for="checkbox-3" class="label">
    <input type="checkbox" name="checkbox-3" id="checkbox-3" class="checkbox" disabled>
    Checkbox
</label>
<label for="checkbox-4" class="label">
    <input type="checkbox" name="checkbox-4" id="checkbox-4" class="checkbox" checked="checked" disabled>
    Checkbox
</label>