svelte-toggle

[![NPM][npm]][npm-url]

> 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

``sh


yarn

yarn add -D svelte-toggle

npm

npm i -D svelte-toggle

pnpm

pnpm i -D svelte-toggle
`

Usage

$3

The component is toggled by default.

`svelte


(isToggled = e.detail)} />

Toggled? {isToggled}
`

$3

The toggled prop supports two way binding.

`svelte


(toggled = !toggled)}>
{toggled ? "Turn off" : "Turn on"}

`

$3

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

`svelte

`

Alternatively, you can override the default slot:

`svelte

{toggled ? "Yes" : "No"}

`

$3

Set small to true to use the small size variant.

`svelte

`

$3

Customize the switch colors:

- switchColor (default: #fff)
- toggledColor (default: #0f62fe)
- untoggledColor (default: #8d8d8d)

`svelte

`

$3

Customize the label text through the label prop.

`svelte

`

$3

Set hideLabel to true to visually hide the label.

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

`svelte

`

$3

Set disabled to true to use the disabled state.

`svelte

`

$3

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.

`svelte




Label
(on = !on)}>
{on ? "On" : "Off"}


`

API

API for the default Toggle component.

$3

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

$3

- on:toggle: fired whenever toggled changes

`svelte


(events = [...events, e.detail])} />

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

$3

- on:click
- on:focus
- on:blur

Changelog

CHANGELOG.md

License

MIT

[npm]: https://img.shields.io/npm/v/svelte-toggle.svg?color=%23ff3e00&style=for-the-badge
[npm-url]: https://npmjs.com/package/svelte-toggle