Slide Toggle

A sliding toggle element that can capture input from a user.

javascript

import { SlideToggle } from '@brainandbones/skeleton';

Usage

typescript

let myValue: boolean = false;

html

<SlideToggle bind:checked={myValue}>(label)</SlideToggle>

html

<SlideToggle bind:checked={myValue} size="lg" />

html

<SlideToggle bind:checked={myValue} disabled />

This component makes use of $$restProps, which allows arbitrary attributes to be provided to the component.

Prop	Type	Default	Values	Description
checked	boolean	false	true \| false	The checked state of the input element.
accent	string	bg-accent-500	class	Provide classes to set the checked state color.
size	string	md	sm \| md \| lg	Sets the size of the component.

Prop	Required	Description
label	-	Provide a semantic label.

Keys	Description
`Space` or `Enter`	When focus is on the slide toggle, changes the state of the slide toggle.