Svelte Toggle

by @antony

A toggle component for Svelte.

Installation

npm i -D @beyonk/svelte-toggle

Usage

Basic:

<Toggle bind:checked on:change={someFunction} ></Toggle>
<script>
  import Toggle from '@beyonk/svelte-toggle'
  let checked = false
</script>

Labels

Specify both on and off labels

<Toggle bind:checked onLabel="Checked" offLabel="Unchecked ></Toggle>
<script>
  import Toggle from '@beyonk/svelte-toggle'
  let checked = false
</script>

Change event

<Toggle bind:checked on:change={someFunction} ></Toggle>
<script>
  import Toggle from '@beyonk/svelte-toggle'
  function someFunction () {
    console.log('Toggle changed value')
  }
</script>

Styling

You can pass in some custom styling:

  const css = {
    fontSize: '1rem',
    align: 'left',
    checkedColor: '#bbe572'
  }
  <Toggle bind:checked {css} ></Toggle>