Checkbox

Material Design 3 checkbox web component (checked, indeterminate, error, and form participation).

Example

npm install @lit-material/checkbox @lit-material/tokens

import "@lit-material/checkbox";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

Material Design 3 checkbox.

Property	Attribute	Type	Default	Description
`checked`	`checked`	`boolean`	`false`
`indeterminate`	`indeterminate`	`boolean`	`false`	Visual-only "partially checked" state; cleared on the next user interaction.
`disabled`	`disabled`	`boolean`	`false`
`error`	`error`	`boolean`	`false`
`required`	`required`	`boolean`	`false`
`name`	`name`	`string`	`""`
`value`	`value`	`string`	`"on"`
`form`	`form`	`string \| undefined`	none
`ariaLabel`	`aria-label`	`string \| null`	`null`	Forwarded to the inner control; checkboxes have no visible label so this is often required.
`ariaLabelledBy`	`aria-labelledby`	`string \| null`	`null`

Event	Description
`change`	Bubbles when the checked state changes via user interaction.

Part	Description
`checkbox`	The container the state layer, focus ring, and box are rendered in.
`icon`	The svg containing the box outline and check/indeterminate mark.
`ripple`	The state-layer element the hover/press feedback is drawn on.
`focus-ring`	The focus indicator element.