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