Checkbox

Usage

<Checkbox />
<Checkbox checked />
<Checkbox indeterminate />

Disabled

<Checkbox disabled />
<Checkbox checked disabled />
<Checkbox indeterminate disabled />

Label

Checkbox one

Checkbox two

<label><Checkbox />Checkbox one</label>
<label><Checkbox />Checkbox two</label>

Theming

Token	Default value
`--np-checkbox-container-shape`	`2px`
`--np-checkbox-outline-color`	`--np-color-on-surface-variant`
`--np-checkbox-selected-container-color`	`--np-color-primary`
`--np-checkbox-selected-icon-color`	`--np-color-on-primary`
`--np-checkbox-margin`	`max(0px, (48px - 18px) / 2)`

--np-checkbox-margin is the space that grows the 18dp box into a 48dp touch target. Only shrink it where the checkbox already sits inside a large enough target of its own, such as a list item.

Example

<Checkbox
	checked
	--np-checkbox-container-shape="10px"
	--np-checkbox-outline-color="var(--np-color-tertiary)"
	--np-checkbox-selected-container-color="var(--np-color-error)"
	--np-checkbox-selected-icon-color="var(--np-color-on-error)"
/>

API

Attribute	Type	Default	Description
`error`	`boolean`	`false`	Draws the checkbox in the error color and sets `aria-invalid` on the input. A disabled checkbox keeps its disabled styling instead.
`...attributes`	`Omit<HTMLInputAttributes, 'type'>`

Bindables

Attribute	Type	Description
`indeterminate`	`boolean \| null \| undefined`	Input property
`checked`	`boolean \| null \| undefined`	Input property
`group`	`(string \| number)[] \| null`	Input property
`element`	`HTMLElement`	A reference to the root DOM element of the component. This variable is bound using `bind:this`, allowing direct access to the underlying HTML element for manipulation or querying within the component's logic.