Sections

Utilities

Forms

Hooks

useIsMobileNew

Checkbox

Control for multiple selections in a set.

Docs API

Accept terms and conditions

Receive notifications

You'll receive a notification when someone posts a comment

Receive marketing emails

Installation


pnpm dlx shadcn@latest add @shark/checkbox

Usage


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


<Checkbox />

Controlled

Use the checked and onCheckedChange props to control the checkbox state programmatically.

Accept terms and conditions

❌

States

Invalid

Use the invalid prop to indicate an invalid state.

Accept terms and conditions

Disabled

Use the disabled prop to disable the checkbox.

Receive newsletter

Examples

With Description

Receive notifications

You'll receive a notification when someone posts a comment on your post

Indeterminate

Select all items

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

Card Style

Enable notifications

You can enable or disable notifications at any time.

API Reference

Checkbox

Checkbox control for boolean or multi-select state.

Prop	Type	Default
`checked`	`boolean \| 'indeterminate'`	`-`
`defaultChecked`	`boolean`	`false`
`disabled`	`boolean`	`false`
`checked`	`boolean \| 'indeterminate'`	`-`
`onCheckedChange`	`({ checked }: CheckedChangeDetails) => void`	`-`
`className`	`string`	`-`

CheckboxGroup

Groups related checkboxes with consistent layout.

Prop	Type	Default
`value`	`string[]`	`-`
`defaultValue`	`string[]`	`[]`
`onValueChange`	`(details: ValueChangeDetails) => void`	`-`
`className`	`string`	`-`

For a complete list of props, see the Ark UI documentation.

Chart

Circular Progress

On This Page

Installation Usage Controlled States Invalid Disabled Examples With Description Indeterminate Group Card Style API Reference Checkbox CheckboxGroup