ss

svelte-switch

Svelte component for toggle/switch a button

Showing:

Popularity

Downloads/wk

105

GitHub Stars

14

Maintenance

Last Commit

8mos ago

Contributors

2

Package

Dependencies

0

Size (min+gzip)

4.7KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

svelte-switch

NPM npm bundle size (minified + gzip)

SvelteJS component for switch or toggle a boolean. User would be able to drag or click for toggling.

Demo

Click here for Storybook link

REPL Link

Installation

npm install svelte-switch

or

yarn add svelte-switch

Usage

<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'}.

API

Props

Prop NameDescriptionDefault Value
checkedRequired fieldundefined
disabledfalse
offColor"#888"
onColor"#080"
offHandleColor"#fff"
onHandleColor"#fff"
handleDiameter0
boxShadownull
activeBoxShadow"0 0 2px 3px #3bf"
height28
width56
id''
containerClass''

Slots

Slot NameDescriptionDefault Set?
checkedIconYes
unCheckedIconYes

Events

Event NameDescriptionevent.detail info
change{event: event, checked}

Examples

Click here to view stories implementation

Credits

Component is reimplementation react-switch. Complete credit goes to author and contributors of react-switch.

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100