# Switch

> Source: https://design.nanatec.co.ke/components/switch/
> A form-associated on/off switch. Works inside a native `<form>`, supports keyboard toggling, and mirrors native checkbox semantics for submission.

A form-associated on/off switch. Works inside a native `<form>`, supports keyboard toggling, and mirrors native checkbox semantics for submission.

## Preview

```html
<nana-switch>Enable notifications</nana-switch>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/switch";
```

## Basic usage

```html
<nana-switch>Enable notifications</nana-switch>
```

## Sizes

```html
<nana-switch size="sm">Small</nana-switch>
<nana-switch size="md">Medium</nana-switch>
<nana-switch size="lg">Large</nana-switch>
```

## States

```html
<nana-switch checked>On</nana-switch>
<nana-switch>Off</nana-switch>
<nana-switch checked disabled>Disabled on</nana-switch>
<nana-switch disabled>Disabled off</nana-switch>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-change` | `CustomEvent` | Fired on toggle (`detail.checked`). |

## Slots

| Slot | Description |
|---|---|
| `(default)` | The label (overrides the `label` attribute). |
| `description` | Secondary descriptive text. |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-switch-accent` | — | Checked track colour. |
| `--nana-switch-thumb` | — | Thumb colour. |

## CSS Parts

| Part | Description |
|---|---|
| `base` | The clickable row |
| `control` | The track |
| `thumb` | The sliding thumb |
| `label` | The label text |

## Accessibility

<ul class="a11y-grid not-content">
  <li>Keyboard accessible</li>
  <li>Screen-reader labels</li>
  <li>Focus-visible states</li>
  <li>ARIA roles and states</li>
  <li>WCAG 2.2 AA contrast</li>
</ul>

## Related components

<ul class="related not-content">
  <li><a href="/components/button/">Button</a></li>
  <li><a href="/components/button-group/">Button Group</a></li>
  <li><a href="/components/icon-button/">Icon Button</a></li>
  <li><a href="/components/input/">Input</a></li>
  <li><a href="/components/textarea/">Textarea</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-switch--docs