Checkbox

<ts-checkbox> vv0.4.0

The ts-checkbox component.

Open in Storybook for interactive demos.

Preview

<ts-checkbox size="md">Content</ts-checkbox>

Property	Attribute	Type	Default	Description
`checked`	`checked`	`boolean`	`false`	Whether the checkbox is checked.
`disabled`	`disabled`	`boolean`	`false`	Renders the checkbox as disabled.
`error`	`error`	`boolean`	`false`	Renders the checkbox in an error state.
`indeterminate`	`indeterminate`	`boolean`	`false`	Whether the checkbox is in an indeterminate state.
`label`	`label`	`string \| undefined`	—	Label text. If omitted, use the default slot.
`name`	`name`	`string \| undefined`	—	Name attribute for form submission.
`size`	`size`	`"lg" \| "md" \| "sm"`	`'md'`	The checkbox size.
`value`	`value`	`string`	`''`	The value associated with this checkbox.

Event	Detail	Bubbles	Composed	Description
`tsChange`	`TsCheckboxChangeEventDetail`	Yes	Yes	Emitted when the checked state changes.

Method	Signature	Description
`toggle`	`toggle() => Promise<void>`	Programmatically toggle the checkbox.

Name	Description
`(default)`	Default slot for the checkbox label.

Use ::part() to style internal elements:

ts-checkbox::part(base) {
  /* your custom styles */
}

<ts-checkbox size="md">Content</ts-checkbox>

import { TsCheckbox } from '@tessera-ui/react';

<TsCheckbox size="md">Content</TsCheckbox>