Checkbox

A control that allows the user to toggle between checked and not checked.

View as Markdown

Accept terms Checked by default Disabled

API Reference

Props mirror Base UI React where applicable, adapted for Svelte 5. Native HTML attributes for the rendered element are also accepted unless noted.

Checkbox.Root

Extends button HTML attributes.

Property	Type	Default	Description
`checked`	`boolean \| undefined`	`—`	Controlled checked state.
`defaultChecked`	`boolean`	`—`	Uncontrolled initial checked state.
`onCheckedChange`	`((checked: boolean, event: Event) => void) \| undefined`	`—`	Event handler called when the checked state changes.
`disabled`	`boolean`	`false`	Whether the control ignores user interaction.
`required`	`boolean`	`—`	—
`name`	`string \| undefined`	`—`	—
`value`	`string \| undefined`	`—`	Controlled value.
`children`	`Snippet<[{ checked: boolean; disabled: boolean }]>`	`—`	Content rendered inside the part.

Data attribute	Description
`data-checked`	Present when the part is checked.
`data-disabled`	Present when the part is disabled.
`data-indeterminate`	Present when the checkbox is indeterminate.
`data-unchecked`	Present when the part is unchecked.

Checkbox.Indicator

Extends span HTML attributes.

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-checked`	Present when the part is checked.
`data-disabled`	Present when the part is disabled.
`data-indeterminate`	Present when the checkbox is indeterminate.
`data-unchecked`	Present when the part is unchecked.