A form-associated checkbox. Works inside a native <form>, supports the indeterminate state, and offers card / toggle tile variants for selection UIs.
Accept terms and conditions
<nana-checkbox>Accept terms and conditions</nana-checkbox>
npm install @nana-tec/ui-components
import "@nana-tec/ui-components/checkbox";
<nana-checkbox>Accept terms and conditions</nana-checkbox>
Small
Medium
Large
<nana-checkbox size="sm">Small</nana-checkbox>
<nana-checkbox size="md">Medium</nana-checkbox>
<nana-checkbox size="lg">Large</nana-checkbox>
Checked
Indeterminate
Disabled
Checked & disabled
<nana-checkbox checked>Checked</nana-checkbox>
<nana-checkbox indeterminate>Indeterminate</nana-checkbox>
<nana-checkbox disabled>Disabled</nana-checkbox>
<nana-checkbox checked disabled>Checked & disabled</nana-checkbox>
Properties
| Property | Attribute | Type | Default | Description |
|---|
checked | — | boolean | false | Checked state |
description | — | string | undefined | — | Secondary descriptive text |
disabled | — | boolean | false | Disable the control |
indeterminate | — | boolean | false | Indeterminate (mixed) state — for "some children selected" |
invalid | — | boolean | false | Invalid styling + state |
label | — | string | undefined | — | Convenience label text (slot wins if both are present) |
loading | — | boolean | false | Replace the box with a spinner |
name | — | string | '' | Form field name |
required | — | boolean | false | Mark as required for form validation |
size | — | CheckboxSize | 'md' | Control size |
value | — | string | 'on' | Submitted value when checked (default "on") |
variant | — | CheckboxVariant | 'default' | Visual style |
Events
| Event | Description |
|---|
nana-change | Fired on toggle (`detail.checked`, `detail.indeterminate`) |
Slots
| Slot | Description |
|---|
(default) | The label (overrides the `label` attribute) |
description | Secondary descriptive text |
CSS parts
| Part | Description |
|---|
::part(control) | The clickable row |
::part(box) | The check box |
::part(label) | The label text |
CSS custom properties
| Property | Description |
|---|
--nana-checkbox-accent | Checked background / border colour |
--nana-checkbox-radius | Box corner radius |
| Event | Type | Description |
|---|
nana-change | CustomEvent | Fired on toggle (detail.checked, detail.indeterminate) |
| Slot | Description |
|---|
(default) | The label (overrides the label attribute) |
description | Secondary descriptive text |
| Variable | Default | Description |
|---|
--nana-checkbox-accent | — | Checked background / border colour |
--nana-checkbox-radius | — | Box corner radius |
| Part | Description |
|---|
control | The clickable row |
box | The check box |
label | The label text |
- Keyboard accessible
- Screen-reader labels
- Focus-visible states
- ARIA roles and states
- WCAG 2.2 AA contrast
Explore Checkbox interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook
