Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/metonym/svelte-toggle
Accessible toggle switch component
https://github.com/metonym/svelte-toggle
a11y accessible button svelte svelte-component switch toggle typescript wai-aria
Last synced: 11 days ago
JSON representation
Accessible toggle switch component
- Host: GitHub
- URL: https://github.com/metonym/svelte-toggle
- Owner: metonym
- License: mit
- Created: 2020-04-22T15:57:17.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-09-17T22:08:29.000Z (about 2 months ago)
- Last Synced: 2024-10-14T08:43:41.728Z (23 days ago)
- Topics: a11y, accessible, button, svelte, svelte-component, switch, toggle, typescript, wai-aria
- Language: Svelte
- Homepage: https://metonym.github.io/svelte-toggle
- Size: 631 KB
- Stars: 42
- Watchers: 3
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://inclusive-components.design/toggle-button/).
Try it in the [Svelte REPL](https://svelte.dev/repl/7eee5c643a684315a4fdfe45964aca61).
---
## Installation
```sh
# 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.
```svelte
import Toggle from "svelte-toggle";
let isToggled = true;
(isToggled = e.detail)} />
Toggled? {isToggled}
```
### Two-way binding
The `toggled` prop supports two way binding.
```svelte
import Toggle from "svelte-toggle";
let toggled = false;
(toggled = !toggled)}>
{toggled ? "Turn off" : "Turn on"}
```
### Switch descriptors
Customize the toggle switch descriptors using the `"on"` and `"off"` props.
```svelte
```
Alternatively, you can override the default slot:
```svelte
{toggled ? "Yes" : "No"}
```
### Small variant
Set `small` to `true` to use the small size variant.
```svelte
```
### Custom colors
Customize the switch colors:
- `switchColor` (default: `#fff`)
- `toggledColor` (default: `#0f62fe`)
- `untoggledColor` (default: `#8d8d8d`)
```svelte
```
### Custom label
Customize the label text through the `label` prop.
```svelte
```
### Hidden label
Set `hideLabel` to `true` to visually hide the label.
**Note**: You should still provide a `label` value for [accessibility](https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text).
```svelte
```
### Disabled
Set `disabled` to `true` to use the disabled state.
```svelte
```
### 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.
```svelte
import { ToggleCore } from "svelte-toggle";
let on = false;
Label
(on = !on)}>
{on ? "On" : "Off"}
```
## 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
```svelte
import Toggle from "svelte-toggle";
let events = [];
(events = [...events, e.detail])} />
on:toggle: {events.join(", ")}
```
### Forwarded events
- on:click
- on:focus
- on:blur
## Changelog
[CHANGELOG.md](CHANGELOG.md)
## License
[MIT](LICENSE)
[npm]: https://img.shields.io/npm/v/svelte-toggle.svg?color=%23ff3e00&style=for-the-badge
[npm-url]: https://npmjs.com/package/svelte-toggle