ds
Components
Checkbox and switch

Checkbox and switch

Native checkboxes in the accent, and a switch.

Checkbox

Show inspector panel Show legend Snap to grid

Code

<label class="chk"><input type="checkbox" checked /> Show inspector panel</label>
<label class="chk"><input type="checkbox" checked /> Show legend</label>
<label class="chk"><input type="checkbox" /> Snap to grid</label>

Native checkboxes, coloured with accent-color. They stay fast, accessible and consistent with the platform.

Switch

Animate links Camera mode Unavailable

Code

<label class="chk"><input class="switch" type="checkbox" role="switch" checked /> Animate links</label>
<label class="chk"><input class="switch" type="checkbox" role="switch" /> Camera mode</label>
<label class="chk"><input class="switch" type="checkbox" role="switch" disabled /> Unavailable</label>

Use a switch when the change applies immediately (a setting). Use a checkbox when the choice is submitted later or is one of several.

Toggle button

For a toggle inside a toolbar, use a button with aria-pressed.

API

Class	On	What it does
`.chk`	label	Inline label with a checkbox or switch.
`.switch`	input[type=checkbox]	Draws a track and knob. Add role="switch".