Checkbox
A styled <input type="checkbox"> with optional label, description, and error message. Supports checked, indeterminate, and disabled states.
Default
<Checkbox label="I agree to the terms" />States
<Checkbox label="Default" />
<Checkbox label="Checked" checked />
<Checkbox label="Indeterminate" indeterminate />
<Checkbox label="Disabled" disabled />With description and error
You can unsubscribe at any time.
You must accept cookies to continue.
<Checkbox
label="Subscribe to newsletter"
description="You can unsubscribe at any time."
/>
<Checkbox
label="Accept cookies"
error="You must accept cookies to continue."
/>Sizes and colors
<Checkbox size="xs" label="xs" checked />
<Checkbox size="sm" label="sm" checked />
<Checkbox size="md" label="md" checked />
<Checkbox size="lg" label="lg" checked color="green" />
<Checkbox size="xl" label="xl" checked color="violet" />Label on left
<Checkbox label="Label on left" labelPosition="left" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | Associates label with checkbox via HTML for/id |
label | ReactNode | — | Clickable label beside the checkbox |
description | ReactNode | — | Helper text below the label |
error | ReactNode|boolean | — | Error message; pass true for styles only |
checked | boolean | — | Checked state (SSR snapshot) |
defaultChecked | boolean | — | Checked on first render (uncontrolled) |
indeterminate | boolean | — | Renders the indeterminate (mixed) state |
disabled | boolean | — | Disables the checkbox |
required | boolean | — | Marks the field as required |
size | 'xs'|'sm'|'md'|'lg'|'xl' | — | Checkbox icon and hit area size |
radius | 'xs'|'sm'|'md'|'lg'|'xl'|string | — | Border-radius of the checkbox box |
color | string | — | Fill color of the checked checkbox |
iconColor | string | — | Color of the checkmark icon |
labelPosition | 'right'|'left' | 'right' | Side on which the label is rendered |
name | string | — | Form field name |
value | string | — | Value submitted when checked |
class | string | — | Additional CSS class names |
style | object | — | Inline styles |