Switch

npm install @vrembem/switch

@use "@vrembem/switch";

Options

Switch uses design token CSS variables in a reference and fallback pattern. Variables are referenced in the component's styles but are not directly defined; instead, they are provided with sensible fallbacks.

--vb-switch-color

var(--vb-form-control-choice-color)

--vb-switch-accent

var(--vb-form-control-choice-accent)

--vb-switch-fill

var(--vb-form-control-choice-fill)

--vb-switch-size

var(--vb-form-control-size)

--vb-switch-border-width

2px

--vb-switch-border-radius

var(--vb-border-radius-circle)

Basic usage

Switch form controls are composed using the <input type="checkbox"> element along with the .switch class.

<input class="switch" type="checkbox" />

Labels

For switch with labels, just wrap the switch element along with label text using the <label> element.

<label>
  <input class="switch" type="checkbox" />
  <span>Switch with a label</span>
</label>

Disabled

Adding the boolean disabled attribute to the input element will provide visual indication that the switch is not available for use.

<input class="switch" type="checkbox" disabled />

Invalid

Adding the is-invalid class or aria-invalid="true" attribute to the switch component will provide visual indication that the form-control value is invalid. Invalid state is also triggered by the native :user-invalid state.

<input class="switch is-invalid" type="checkbox" />