Form controls

Checkbox

A custom-styled checkbox built on a real native <input type="checkbox">, so form submission, keyboard focus, and screen readers all behave the way you'd expect.

Basic

I agree to the terms

With a hint

Send me product updates

Once a month, no spam.

Disabled

Locked option

You don't have permission to change this.

API

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Bindable checked state.
`indeterminate`	`boolean`	`false`	Bindable: partly checked, announced as mixed.
`label`	`string`	no default	Inline label text.
`description`	`string`	no default	A second line under the label.
`error`	`string`	no default	A message under the box, tied to it for screen readers, which also mark it invalid.
`icon`	`Component`	no default	A Lucide icon drawn before the label.
`labelHidden`	`boolean`	`false`	Keeps the label for screen readers only, for a box in a table cell whose column header names it.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	The size of the box and its label.
`variant`	`'inline' \| 'card'`	`'inline'`	The card variant draws a bordered option whose whole surface is the target.
`hint`	`string`	no default	Subdued hint below the label.
`disabled`	`boolean`	`false`	Disable the checkbox.
`required`	`boolean`	`false`	Required for form validation. Renders a red asterisk.
`id`	`string`	no default	DOM id of the underlying input.
`name`	`string`	no default	Native form name.
`value`	`string`	no default	Native form value (matters for grouped checkboxes).
`onchange`	`(checked: boolean) => void`	no default	Fires when the user toggles the checkbox.
`class`	`string`	no default	Extra classes, appended to the component's own.
`noAI`	`boolean`	`false`	Keep the value from an assistant: a FormAssist never reports it or fills it, and the control is marked data-no-ai for a browser agent.