Checkbox

@/components/kamod-ui/checkbox

Accept terms and conditions

By clicking this checkbox, you agree to the terms.

Enable notifications

You can enable or disable notifications at any time.

Installation

Import Checkbox from `@/components/kamod-ui/checkbox`.

pnpm add @kamod-ch/ui

Usage

Use defaultChecked or checked with onCheckedChange. Pair with Field, FieldLabel, and data-disabled / data-invalid on Field for states. checked may be true, false, or "indeterminate" (minus icon, aria-checked=mixed).

import { Checkbox } from "@/components/kamod-ui/checkbox";

<Checkbox />

Demo

FieldGroup with FieldLabel, descriptions, disabled row, and nested FieldLabel (shadcn CheckboxDemo).

Usage

Minimal standalone checkbox.

Checked state

Controlled checked with onCheckedChange (boolean).

Unchecked

Indeterminate

Tri-state: pass checked="indeterminate" or toggle from mixed to checked via click.

Invalid

Field data-invalid and Checkbox aria-invalid (shadcn Invalid).

Accept terms and conditions

Basic

Single horizontal Field + FieldLabel.

Accept terms and conditions

Description

FieldContent with FieldDescription.

Accept terms and conditions

By clicking this checkbox, you agree to the terms and conditions.

Disabled

disabled on Checkbox and data-disabled on Field.

Enable notifications

Group

FieldSet, FieldLegend, FieldGroup list (shadcn Group).

Show these items on the desktop:

Select the items you want to show on the desktop.

Hard disks

External disks

CDs, DVDs, and iPods

Connected servers

Table

Select-all and row selection with data-state on TableRow.

Name	Email	Role
Sarah Chen	sarah.chen@example.com	Admin
Marcus Rodriguez	marcus.rodriguez@example.com	User
Priya Patel	priya.patel@example.com	User
David Kim	david.kim@example.com	Editor

API Reference

Props, slots and variants for this component.

Checkbox

Checkbox component props and accepted values.

Prop	Type	Default
checked	`boolean \| "indeterminate"`	`uncontrolled`
defaultChecked	`boolean \| "indeterminate"`	`false`
onCheckedChange	`(checked) => void`	`—`
disabled	`boolean`	`false`
aria-invalid	`boolean`	`false`
…	`native input attrs`	`id, name, class, …`

Accessibility Notes

Prefer visible labels with htmlFor or aria-label on icon-only table checkboxes. aria-checked reflects mixed for indeterminate.