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>
Properties
| Property | Attribute | Type | Default | Description |
|---|
checked | — | boolean | false | On/off state. |
description | — | string | undefined | — | Secondary descriptive text. |
disabled | — | boolean | false | Disable the control. |
label | — | string | undefined | — | Convenience label text (slotted content wins). |
name | — | string | '' | Form field name. |
required | — | boolean | false | Mark as required for form validation. |
size | — | SwitchSize | 'md' | Control size. |
value | — | string | 'on' | Submitted value when checked (default "on"). |
Events
| Event | Description |
|---|
nana-change | Fired on toggle (`detail.checked`). |
Slots
| Slot | Description |
|---|
(default) | The label (overrides the `label` attribute). |
description | Secondary descriptive text. |
CSS parts
| Part | Description |
|---|
::part(base) | The clickable row. |
::part(control) | The track. |
::part(thumb) | The sliding thumb. |
::part(label) | The label text. |
CSS custom properties
| Property | Description |
|---|
--nana-switch-accent | Checked track colour. |
--nana-switch-thumb | Thumb colour. |
| 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
