Skip to content

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

Uncontrolled

The component is toggled by default.

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

  let isToggled = true;
</script>

<Toggle on:toggle={(e) => (isToggled = e.detail)} />

Toggled? {isToggled}

Two-way binding

The toggled prop supports two way binding.

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

  let toggled = false;
</script>

<Toggle bind:toggled />

<button on:click={() => (toggled = !toggled)}>
  {toggled ? "Turn off" : "Turn on"}
</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.

Use this component if you want to style the component yourself.

<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

Changelog

CHANGELOG.md

License

MIT