Checkbox

A form-associated checkbox — works inside a native <form>, supports the indeterminate state, and offers card / toggle tile variants. See also Checkbox Group.

States

Unchecked

Checked

Indeterminate (parent)

Disabled

Disabled checked

Invalid / required

checkbox.html

html

1	<nana-checkbox name="terms" required>I agree to the terms</nana-checkbox>
2	<nana-checkbox checked>Subscribed</nana-checkbox>
3	<nana-checkbox indeterminate>Parent category</nana-checkbox>

Sizes

Size sm

Size md

Size lg

With description

Card & Toggle

Selectable tile

card.html

html

1	<nana-checkbox variant="card" checked label="Premium Plan" description="$29 / month"></nana-checkbox>
2	<nana-checkbox variant="toggle" checked>Selectable tile</nana-checkbox>

Import

main.ts

1	import "@nana-tec/ui-components/checkbox";

Events

Event	Detail
`nana-change`	`{ checked, indeterminate }`

 Customization
   Branded blue Pink, rounded 
 
         
   checkbox.css     css   
 
       1  nana-checkbox.brand {  
  2    --nana-checkbox-accent: #2563eb;  
  3    --nana-checkbox-radius: 9999px;  
  4  }  
 
 
 
 
  Props
   Attribute Type Default Description
  checked boolean false Checked state
indeterminate boolean false Mixed state (some children selected)
disabled boolean false Disable the control
required boolean false Required for form validation
invalid boolean false Invalid styling + state
loading boolean false Replace the box with a spinner
value string "on" Submitted value when checked
name string — Form field name
label string — Label text (slot wins)
description string — Secondary text
size sm | md | lg md Control size
variant default | card | toggle default Visual style
 
 
 
 Accessibility
  role="checkbox" with aria-checked (true / false / mixed).
 Keyboard: Space / Enter toggles; focus ring on the box.
 Form-associated — participates in <form>, reset and constraint validation.

Attribute	Type	Default	Description
`checked`	`boolean`	`false`	Checked state
`indeterminate`	`boolean`	`false`	Mixed state (some children selected)
`disabled`	`boolean`	`false`	Disable the control
`required`	`boolean`	`false`	Required for form validation
`invalid`	`boolean`	`false`	Invalid styling + state
`loading`	`boolean`	`false`	Replace the box with a spinner
`value`	`string`	`"on"`	Submitted value when checked
`name`	`string`	`—`	Form field name
`label`	`string`	`—`	Label text (slot wins)
`description`	`string`	`—`	Secondary text
`size`	`sm \| md \| lg`	`md`	Control size
`variant`	`default \| card \| toggle`	`default`	Visual style

1	nana-checkbox.brand {
2	--nana-checkbox-accent: #2563eb;
3	--nana-checkbox-radius: 9999px;
4	}