Skip to content

GemHQ/svelte-toggle

 
 

Repository files navigation

svelte-toggle

NPM

Accessible toggle switch component

This Svelte component implements accessibility practices for toggle buttons recommended by the Inclusive Components guide.

Try it in the Svelte REPL.


Installation

Yarn

yarn add -D svelte-toggle

NPM

npm i -D svelte-toggle

pnpm

pnpm i -D svelte-toggle

Usage

Basic

<script>
  import Toggle from "svelte-toggle";

  let toggled;
</script>

<Toggle bind:toggled />

Toggled? {toggled}

The toggled prop supports two way binding.

<Toggle bind:toggled />

<button on:click={() => (toggled = !toggled)}>Toggle</button>

Switch descriptors

Customize the toggle switch descriptors using the "on" and "off" props.

<Toggle on="On" off="Off" />

Alternatively, you can override the default slot:

<Toggle let:toggled>
  <strong>{toggled ? "Yes" : "No"}</strong>
</Toggle>

Small variant

Set small to true to use the small size variant.

<Toggle small />

Custom colors

Customize the switch colors:

  • switchColor (default: #fff)
  • toggledColor (default: #0f62fe)
  • untoggledColor (default: #8d8d8d)
<Toggle switchColor="#eee" toggledColor="#24a148" untoggledColor="#fa4d56" />

Custom label

Customize the label text through the label prop.

<Toggle label="Custom label" />

Hidden label

Set hideLabel to true to visually hide the label.

Note: You should still provide a label value for accessibility.

<Toggle hideLabel label="Custom label" />

Disabled

Set disabled to true to use the disabled state.

<Toggle disabled />

Fully controlled

ToggleCore is an unstyled component that provides the accessibility attributes for the label and button elements.

<script>
  import { ToggleCore } from "svelte-toggle";

  let on = false;
</script>

<ToggleCore toggled={on} let:label let:button>
  <!-- svelte-ignore a11y-label-has-associated-control -->
  <label {...label}>Label</label>
  <button {...button} on:click={() => (on = !on)}>
    {on ? "On" : "Off"}
  </button>
</ToggleCore>

API

API for the default Toggle component.

Props

Prop name Type Default value
id string "toggle" + Math.random().toString(36)"
label string "Label"
hideLabel boolean false
small boolean false
toggled boolean true
disabled boolean false
on string undefined
off string undefined
switchColor string "#fff"
toggledColor string "#0f62fe"
untoggledColor string "#8d8d8d"

Dispatched events

  • on:toggle: fired whenever toggled changes
<script>
  import Toggle from "svelte-toggle";

  let events = [];
</script>

<Toggle on:toggle={(e) => (events = [...events, e.detail])} />

on:toggle: {events.join(", ")}

Forwarded events

  • on:click
  • on:focus
  • on:blur

TypeScript

Svelte version 3.31 or greater is required to use this component with TypeScript.

TypeScript definitions are located in the types folder.

Changelog

CHANGELOG.md

License

MIT

Packages

No packages published

Languages

  • Svelte 82.5%
  • JavaScript 17.5%