Checkbox · base-ui-svelte

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.

Represents the checkbox itself. Renders a <span> element and a hidden <input> beside.

Props

checked boolean undefined

defaultChecked boolean false

onCheckedChange function —

disabled boolean false

required boolean false

Name: required
Description: Whether the user must tick the checkbox before submitting a form.
Type: boolean
Default: false

readOnly boolean false

Name: readOnly
Description: Whether the user should be unable to tick or untick the checkbox.
Type: boolean
Default: false

name string undefined

value string —

uncheckedValue string —

Name: uncheckedValue
Description: Submitted when the checkbox is unchecked (native form pattern).
Type: string | undefined

form string —

indeterminate boolean false

Name: indeterminate
Description: Whether the checkbox is in a mixed state: neither ticked, nor unticked.
Type: boolean
Default: false

parent boolean false

Name: parent
Description: When true inside a CheckboxGroup with allValues, this checkbox controls selecting / clearing the whole group (parent checkbox).
Type: boolean
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet<[{ checked: boolean; disabled: boolean; indeterminate: boolean }]>

Data attributes

Attribute	Description
`data-checked`	Present when the checkbox is checked.
`data-disabled`	Present when the checkbox is disabled.
`data-indeterminate`	Present when the checkbox is in an indeterminate state.
`data-readonly`	Present when the checkbox is readonly.
`data-unchecked`	Present when the checkbox is not checked.

Indicates whether the checkbox is ticked. Renders a <span> element.

Props

keepMounted boolean false

Name: keepMounted
Description: Whether to keep the element in the DOM when the checkbox is not checked.
Type: boolean
Default: false

children snippet —

Data attributes

Attribute	Description
`data-checked`	Present when the checkbox is checked.
`data-disabled`	Present when the checkbox is disabled.
`data-indeterminate`	Present when the checkbox is in an indeterminate state.
`data-unchecked`	Present when the checkbox is not checked.