# @19h47/switch

> An accessible switch widget implementing the ARIA switch pattern, with keyboard support and native DOM events.

Latest version **2.1.0** (published 2026-06-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install @19h47/switch
pnpm add @19h47/switch
yarn add @19h47/switch
bun add @19h47/switch
```

## Health

**Score 55/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2026-06-24 |
| First published | 2020-02-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 20.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Jérémy Levron |
| Maintainers | 19h47 |
| Keywords | accessibility, a11y, switch |

## Links

- npm: https://www.npmjs.com/package/@19h47/switch
- Repository: https://github.com/19h47/19h47-switch
- Homepage: https://github.com/19h47/19h47-switch#readme
- Issues: https://github.com/19h47/19h47-switch/issues
- npm.io page: https://npm.io/package/@19h47/switch

## Recent versions

- 2.1.0 (latest) — 2026-06-24
- 2.0.0 — 2025-06-17
- 1.0.0 — 2023-10-04
- 0.2.0 — 2023-09-28
- 0.1.3 — 2023-07-27
- 0.1.2 — 2021-05-27
- 0.1.1 — 2020-10-20
- 0.1.0 — 2020-10-20
- 0.0.0 — 2020-02-10

## README

# @19h47/switch

A switch is an on/off control that represents a binary setting. It provides an accessible, keyboard-navigable interface following the [ARIA switch pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/), reads its state from the markup, and dispatches native DOM events when toggled.

## Installation

```
pnpm add @19h47/switch
```

## HTML

```html
<div role="switch" tabindex="0" aria-checked="false">
	<span class="label">Notifications</span>
	<span class="switch"><span></span></span>
	<span class="on" aria-hidden="true">On</span>
	<span class="off" aria-hidden="true">Off</span>
	<div hidden><input type="checkbox" /></div>
</div>
```

When disabled, use `aria-disabled="true"` and `tabindex="-1"`.

```html
<div role="switch" tabindex="-1" aria-checked="false" aria-disabled="true">
	<span class="label">Disabled switch</span>
	<span class="switch"><span></span></span>
	<div hidden><input type="checkbox" /></div>
</div>
```

## JavaScript

```javascript
import Switch from '@19h47/switch';

const $switch = document.querySelector('[role="switch"]');

const switchButton = new Switch($switch);
switchButton.init();
```

## Keyboard support

| Key                                  | Function                                                |
| ------------------------------------ | ------------------------------------------------------- |
| <kbd>Tab</kbd>                       | <ul><li>Moves keyboard focus to the `switch`.</li></ul> |
| <kbd>Space</kbd><br><kbd>Enter</kbd> | <ul><li>Toggle switch between on and off.</li></ul>     |

## Event

Events are dispatched on the switch element.

| Event             | Description              |
| ----------------- | ------------------------ |
| Switch.activate   | Fired when activated.    |
| Switch.deactivate | Fired when deactivated.  |

```javascript
import Switch from '@19h47/switch';

const $switch = document.querySelector('[role="switch"]');

const switchButton = new Switch($switch);
switchButton.init();

$switch.addEventListener('Switch.deactivate', () => {
	console.log('deactivated');
});

$switch.addEventListener('Switch.activate', () => {
	console.log('activated');
});
```

## Acknowledgment

-   [Switch Example](https://www.w3.org/WAI/ARIA/apg/patterns/switch/examples/switch/)
-   [Switch Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/)

---
_Source: https://npm.io/package/@19h47/switch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._