svelte-toggle

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