Checkbox

Checkbox lets users select or clear an independent option. It supports checked, unchecked, indeterminate, invalid, read-only, and disabled states through Base UI.

Use checkboxes when several choices can be selected at the same time. For one choice from a mutually exclusive set, use a radio group instead.

Live previewInteractive / Local

Share telemetrySend anonymous performance data.

Select services2 of 5 services selected.

Installation

Sourcebash

pnpm dlx shadcn@latest add http://ui.argv-tech.dev/r/checkbox.json

Usage

Sourcetsx

import { Checkbox } from "@/components/ui/argv/checkbox"

<div>
    <Checkbox id="telemetry" name="telemetry" />
    <label htmlFor="telemetry">Share telemetry</label>
</div>

States

Use defaultChecked for uncontrolled state, or combine checked with onCheckedChange when the parent owns the value. Form props such as name, value, and required are forwarded to Base UI.

Set disabled when the option is unavailable. Use readOnly when the value cannot change but should remain visible and focusable according to the surrounding form behavior.

The indeterminate state communicates a partially selected collection, such as “2 of 5 selected.” It is independent from the checked value and should be set explicitly.

API Reference

Checkbox

Prop	Type	Default
`defaultChecked`	`boolean`	`false`
`checked`	`boolean`	-
`onCheckedChange`	`(checked: boolean) => void`	-
`indeterminate`	`boolean`	`false`
`disabled`	`boolean`	`false`
`readOnly`	`boolean`	`false`
`required`	`boolean`	`false`
`name`	`string`	-
`value`	`string`	-
`className`	`string`	-

The component forwards the remaining Base UI Checkbox root props and renders its checked and indeterminate indicators automatically.

Accessibility

Connect every checkbox to a visible label using matching id and htmlFor values. The label should describe the option in its selected form, such as “Share telemetry.”

For validation, set aria-invalid="true" and reference helpful error text with aria-describedby. Do not rely on the invalid color alone.