Checkbox

Usage

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

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-primary`
`--np-checkbox-selected-container-color`	`--np-color-on-surface-variant`
`--np-checkbox-selected-icon-color`	`--np-color-on-primary`

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
`...attributes`	`Omit<HTMLInputAttributes, 'type'>`

Bindables

Attribute	Type	Description
`indeterminate`	`boolean \| null \| undefined`	Input property
`checked`	`boolean \| null \| undefined`	Input property
`group`	`string \| number \| undefined`	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.