Docs
Components
Checkbox

Checkbox

A control that allows the user to toggle between checked and not checked.

Docs

Preview

Code

Accept terms and conditions

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/checkbox

Anatomy

Single import

Multiple imports

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

<Checkbox.Provider>
  <Checkbox.Root>
    <Checkbox.Indicator />
  </Checkbox.Root>
  Label
</Checkbox.Provider>;

Examples

Disabled

Preview

Code

Enable notifications

Group

Preview

Code

Enable notifications

You can enable or disable notifications at any time.

Form

Under Construction

This component is currently being built. Check back soon for updates!

API Reference

Checkbox.Provider

Prop	Type	Default
`isSelected`	`boolean`
`defaultSelected`	`boolean`
`onChange`	`function`
`isIndeterminate`	`boolean`
`isDisabled`	`boolean`
`isReadOnly`	`boolean`
`isRequired`	`boolean`
`isInvalid`	`boolean`
`name`	`string`
`value`	`string`
`children`	`ReactNode`

Checkbox.Root

Prop	Type	Default
`children`	`ReactNode`

Checkbox.Indicator

Prop	Type	Default
`className`	`string`

Carousel Collapsible

On This Page

Installation
Anatomy
Examples
Disabled
Group
Form
API Reference
Checkbox.Provider
Checkbox.Root
Checkbox.Indicator

Contribute