svelte-toggle

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