Forms

Checkbox

A native checkbox with a styled control. `indeterminate` is a DOM property with no HTML attribute, which is why it needs an effect rather than a prop on the element.

data-scope="checkbox"

Usage

ReactVueSvelteAngular

<Checkbox label="Accept terms" onChange={e => set(e.target.checked)} />

<Checkbox v-model="accepted" label="Accept terms" />

<Checkbox bind:checked={accepted} label="Accept terms" />

<ck-checkbox label="Accept terms" [(checked)]="accepted" />

Props

Prop	Type	Default	Notes
`size`	"sm" \| "md" \| "lg"	`"md"`	Control size.
`label`	ReactNode	—	Label text.
`invalid`	boolean	`false`	Invalid state.
`indeterminate`	boolean	`false`	Mixed state.

Prop names are identical in all four frameworks. Only two-way binding differs, and each framework uses its own idiom over the same underlying prop.