Back to Components

Form

Checkbox

Boolean form control. Native checkbox under the hood — keyboard focus, form submission, and accessibility come for free.

Examples

With labels

<Checkbox bind:checked={agree} label="I agree to the terms" />
<Checkbox bind:checked={news} label="Send me product updates" />

Indeterminate (select-all row)

<Checkbox indeterminate label="3 of 7 selected" />

Disabled

<Checkbox disabled label="Disabled" />

Props

PropTypeDefaultDescription
checkedbooleanfalseBindable boolean state.
indeterminatebooleanfalseMixed-state visual (horizontal bar instead of checkmark).
labelstringInline caption next to the box.
size'sm' | 'md''md'Box dimension tier.
...restHTMLInputAttributesSpread onto the hidden native <input>.

Install

CLI

npx @a3tai/mittsu add checkbox