Toggle

CSS-only switch styling for native checkbox inputs in @bnotk/dsx.

Live Preview

Import

<link rel="stylesheet" href="@bnotk/dsx/css/toggle.css">

Or use the full bundle:

<link rel="stylesheet" href="@bnotk/dsx/css/index.css">

Classes

Class	Purpose
`.dsx-toggle`	Inline label wrapper for the switch and text
`.dsx-toggle__input`	The custom-styled checkbox track and thumb
`.dsx-toggle__label`	The visible label text

States

.dsx-toggle:has(input:disabled) lowers opacity and disables the pointer cursor.
Default track color is var(--ds2-color-grey-3).
Checked state changes the track to var(--ds2-color-main) and slides the thumb 1.125rem.
:focus-visible uses var(--ds2-shadow-focus).
Disabled inputs switch the track to var(--ds2-color-grey-2).

Example

<label class="dsx-toggle">
  <input class="dsx-toggle__input" type="checkbox" checked>
  <span class="dsx-toggle__label">Enable notifications</span>
</label>

Accessibility notes

Keep the native checkbox input so assistive tech can announce state.
Pair the control with visible text.
If you expose the control as a switch pattern, ensure your JavaScript also manages aria-checked and keyboard behavior consistently.
Use the real disabled attribute when the control is unavailable.