Slide Toggles

This component provides an alternative UI for a checkbox input element.

let valueChecked: boolean = false;

<SlideToggle name="slider-example" bind:checked={valueChecked}>(text)</SlideToggle>

Additional Sizes

Slide toggles have a default base size, but you can optionally use a smaller or larger size.

<SlideToggle ... size="sm" />
<SlideToggle ... size="lg" />

Checkbox Attributes

This component supports Svelte's $$restProps, which allows for required, disabled, and any other valid checkbox input attributes.

<SlideToggle ... required disabled />