Checkbox

Checked, unchecked, and indeterminate states.

Email notifications

Installation

npx @noarka/cli add checkbox

tsx

import { Checkbox } from "@noarka/ui";

tsx

<label className="flex cursor-pointer items-center gap-2 text-sm">  <Checkbox defaultChecked /> Email notifications</label>

Form integration

Name, value and required wire the checkbox into native form submission and validation.

Disabled

Disabled checkboxes ignore interaction and render dimmed.

Checked Unchecked

With description

Pair the label with helper text for longer explanations.

Email notificationsGet notified about activity.

Checkbox

Prop	Type	Default
`checked` Controlled checked state. Use with onCheckedChange.	`boolean`	`-`
`defaultChecked` Initially checked when uncontrolled.	`boolean`	`false`
`onCheckedChange` Called when the checkbox is ticked or unticked.	`(checked: boolean) => void`	`-`
`disabled` Ignore user interaction. Renders at half opacity.	`boolean`	`false`
`indeterminate` Mixed state: neither ticked nor unticked. Pair with checked={false}.	`boolean`	`false`
`readOnly` Show state without allowing tick or untick.	`boolean`	`false`
`required` Require the checkbox to be ticked before form submit.	`boolean`	`false`
`name` Identifies the field when the form is submitted.	`string`	`-`
`value` Value submitted with the form when ticked.	`string`	`-`
`render` Polymorphic render prop. Use to render a custom element.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default checkbox styles.	`string`	`-`