Switch
Switch turns one setting on or off with immediate effect. It is a native checkbox with the switch role, drawn as a track and thumb, with one root hook, one optional description hook, and one size option.
Public web API
One root hook, a native checkbox with role="switch", a visible label, and an optional description.
<div data-bitsy-switch>
<input
id="email-alerts"
name="email-alerts"
type="checkbox"
role="switch"
checked
aria-describedby="email-alerts-help"
/>
<label for="email-alerts">Email alerts</label>
<p id="email-alerts-help" data-bitsy-switch-description>
Get an email when someone mentions you.
</p>
</div>
<div data-bitsy-switch data-bitsy-size="sm">
<label for="compact-mode">Compact mode</label>
<input id="compact-mode" name="compact-mode" type="checkbox" role="switch" />
</div>role="switch"makes assistive tech announce on and off instead of checked.- Put the label first to place the switch at the end of the row.
data-bitsy-size="sm"is the only option;mdis the default.- Use it only for settings that apply right away. Use a checkbox in forms that submit later.
Sizes and states
The thumb moves to the end of the track when on, so the state never relies on color alone.
Get an email when someone mentions you.
Turn off interface animations.
Notify me when someone mentions me.
A summary of activity every Monday.
Foundation versus Bit
A raw checkbox keeps the foundation's native look with the brand accent-color. data-bitsy-switch adds the switch role mapping, the drawn track and thumb, and the label and description layout. Saving the setting is the app's job, so the Bit ships no JavaScript.