Checkbox

A control element that allows for multiple selections within a set

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-ui/checkbox

Usage


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


<Checkbox />

Controlled

Use the checked prop to control the checkbox.

Accept terms and conditions

Terms were not accepted

Invalid State

Use the invalid prop to indicate an invalid state.

Accept terms and conditions

You must accept the terms to continue

You can pass invalid prop to the <Field /> to disable the label and description or <Checkbox /> to disable just the checkbox.

Examples

With Description

Use <FieldDescription /> to add a description to the checkbox.

Receive notifications

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

Disabled

Use the disabled prop to disable the checkbox.

Receive newsletter

Indeterminate

Use the checked="indeterminate" prop to set the checkbox to an indeterminate state.

Select all items

Group

Use <CheckboxGroup /> to group multiple checkboxes together.

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

Use defaultValue to set the default checked values.


<CheckboxGroup defaultValue={["value-1", "value-2"]}>
  <Checkbox value="value-1" />
  <Checkbox value="value-2" />
  <Checkbox value="value-3" />
</CheckboxGroup>

Card Style

Use <FieldLabel /> to add a label to the checkbox.

Enable notifications

You can enable or disable notifications at any time.

API Reference

Checkbox

Root element of the checkbox. Renders a button

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

CheckboxGroup

Container for a group of checkboxes. Renders a div

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

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

On This Page

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