beyonk-adventures / svelte-toggle

Toggle component for Svelte

Svelte Toggle

by @antony

A toggle component for Svelte.

Installation

npm i -D @beyonk/svelte-toggle

Usage

Basic:

<Toggle bind:checked on:change={someFunction} />

<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 />

<script>
  import Toggle from '@beyonk/svelte-toggle'

  let checked = false
</script>

Change event

<Toggle bind:checked on:change={someFunction} />

<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} />