A form-associated on/off switch. Works inside a native <form>, supports keyboard toggling, and mirrors native checkbox semantics for submission.
Enable notifications
<nana-switch>Enable notifications</nana-switch>
npm install @nana-tec/ui-components
import "@nana-tec/ui-components/switch";
<nana-switch>Enable notifications</nana-switch>
Small
Medium
Large
<nana-switch size="sm">Small</nana-switch>
<nana-switch size="md">Medium</nana-switch>
<nana-switch size="lg">Large</nana-switch>
On
Off
Disabled on
Disabled off
<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>
| Property | Type | Default | Description |
|---|
checked | boolean | false | On/off state. |
disabled | boolean | false | Disable the control. |
required | boolean | false | Mark as required for form validation. |
value | string | 'on' | Submitted value when checked (default “on”). |
name | string | '' | Form field name. |
label | string | undefined | — | Convenience label text (slotted content wins). |
description | string | undefined | — | Secondary descriptive text. |
size | 'sm' | 'md' | 'lg' | 'md' | Control size. |
| Event | Type | Description |
|---|
nana-change | CustomEvent | Fired on toggle (detail.checked). |
| Slot | Description |
|---|
(default) | The label (overrides the label attribute). |
description | Secondary descriptive text. |
| Variable | Default | Description |
|---|
--nana-switch-accent | — | Checked track colour. |
--nana-switch-thumb | — | Thumb colour. |
| Part | Description |
|---|
base | The clickable row |
control | The track |
thumb | The sliding thumb |
label | The label text |
- Keyboard accessible
- Screen-reader labels
- Focus-visible states
- ARIA roles and states
- WCAG 2.2 AA contrast
Explore Switch interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook
