NPM npm bundle size (minified + gzip)
SvelteJS component for switch or toggle a boolean. User would be able to drag or click for toggling.
npm install svelte-switch
or
yarn add svelte-switch
<script> import Switch from "svelte-switch"; let checkedValue = true; function handleChange(e) { const { checked } = e.detail; checkedValue = checked; } </script> <h1>Simple usage</h1> Switch with default style <Switch on:change={handleChange} checked={checkedValue} /> <br /> The switch is {checkedValue ? 'on' : 'off'}.
| Prop Name | Description | Default Value |
|---|---|---|
| checked | Required field | undefined |
| disabled | false | |
| offColor | "#888" | |
| onColor | "#080" | |
| offHandleColor | "#fff" | |
| onHandleColor | "#fff" | |
| handleDiameter | 0 | |
| boxShadow | null | |
| activeBoxShadow | "0 0 2px 3px #3bf" | |
| height | 28 | |
| width | 56 | |
| id | '' | |
| containerClass | '' |
| Slot Name | Description | Default Set? |
|---|---|---|
| checkedIcon | Yes | |
| unCheckedIcon | Yes |
| Event Name | Description | event.detail info |
|---|---|---|
| change | {event: event, checked} |
Click here to view stories implementation
Component is reimplementation react-switch. Complete credit goes to author and contributors of react-switch.
MIT