basecn
Components

Checkbox

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

Docs API Reference

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

Installation

pnpm dlx shadcn@latest add https://basecn.dev/r/checkbox.json
or

If you are using a namespaced registry, you can use the following command:

pnpm dlx shadcn@latest add @basecn/checkbox

Examples

Size

Shape

Color

Cards

With Form

Select the items you want to display in the sidebar.

Migrating from Radix UI

Common Migration Steps

All components share several migration patterns when moving from Radix UI to Base UI. Before proceeding with component-specific changes, review the essential migration patterns.

Familiarizing yourself with these patterns will make the component-specific migration steps much clearer.

Indeterminate State

In Radix UI, you can pass the checked or defaultChecked prop with a value of "indeterminate" to the Checkbox component to control the indeterminate state.

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

<Checkbox checked="indeterminate" />
// or
<Checkbox defaultChecked="indeterminate" />

With Base UI, you can pass the indeterminate prop to the Checkbox component to control the indeterminate state.

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

<Checkbox indeterminate />
Docs by Fumadocs
Analytics by Databuddy