Checkbox

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

PreviewSource

Accept terms and conditions

By clicking this checkbox, you agree to the terms.

Enable notifications

You can enable or disable notifications at any time.

Example requirements

Also uses: Field, Label.

Installation

Complete the project setup first, including Tailwind CSS v4, theme tokens, and Preact compatibility aliases.

1. Install dependencies

bun add --exact cn@0.4.0 lucide-preact@1.51.0 preact@11.0.0 tw-animate-css@1.4.0

2. Copy the component with degit

Run this from your project root. It selects checkbox.tsx, its local dependencies, and both licenses directly from the repository, then copies them into src/components/ui.

bunx degit@3.10.0 https://github.com/LiasCode/shadcn-preact#main ./.cache/shadcn-preact/checkbox --files LICENSE.md,registry/ui/checkbox.tsx,registry/ui/lib/utils.ts,registry/ui/primitives/LICENSE,registry/ui/primitives/checkbox/index.parts.ts,registry/ui/primitives/checkbox/index.ts,registry/ui/primitives/checkbox/indicator/CheckboxIndicator.tsx,registry/ui/primitives/checkbox/root/CheckboxRoot.tsx,registry/ui/primitives/checkbox/root/CheckboxRootContext.ts,registry/ui/primitives/checkbox/utils/useStateAttributesMapping.ts,registry/ui/primitives/field/control/FieldControl.tsx,registry/ui/primitives/internals/FieldRootContext.ts,registry/ui/primitives/internals/FieldsetRootContext.ts,registry/ui/primitives/internals/LabelableContext.ts,registry/ui/primitives/internals/composite/root/CompositeRootContext.ts,registry/ui/primitives/internals/createBaseUIEventDetails.ts,registry/ui/primitives/internals/empty.ts,registry/ui/primitives/internals/getReactElementRef.ts,registry/ui/primitives/internals/getStateAttributesProps.ts,registry/ui/primitives/internals/mergeObjects.ts,registry/ui/primitives/internals/resolveClassName.ts,registry/ui/primitives/internals/resolveRef.ts,registry/ui/primitives/internals/resolveStyle.ts,registry/ui/primitives/internals/stateAttributesMapping.ts,registry/ui/primitives/internals/types.ts,registry/ui/primitives/internals/useAnimationFrame.ts,registry/ui/primitives/internals/useAnimationsFinished.ts,registry/ui/primitives/internals/useButton.ts,registry/ui/primitives/internals/useCheckable.ts,registry/ui/primitives/internals/useControlled.ts,registry/ui/primitives/internals/useFocusableWhenDisabled.ts,registry/ui/primitives/internals/useId.ts,registry/ui/primitives/internals/useIsoLayoutEffect.ts,registry/ui/primitives/internals/useMergedRefs.ts,registry/ui/primitives/internals/useOnMount.ts,registry/ui/primitives/internals/useOpenChangeComplete.ts,registry/ui/primitives/internals/useRefWithInit.ts,registry/ui/primitives/internals/useRegisterFieldControl.ts,registry/ui/primitives/internals/useRenderElement.ts,registry/ui/primitives/internals/useStableCallback.ts,registry/ui/primitives/internals/useTransitionStatus.ts,registry/ui/primitives/internals/visuallyHidden.ts,registry/ui/primitives/merge-props/index.ts --force
mkdir -p ./src/components/ui
cp -R ./.cache/shadcn-preact/checkbox/registry/ui/. ./src/components/ui/
cp ./.cache/shadcn-preact/checkbox/LICENSE.md ./src/components/ui/LICENSE.md

The temporary copy lives in .cache/shadcn-preact/checkbox. Existing components stay in place; shared source files are updated from main.

Selected source files (42)

Usage

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

<Checkbox />

Examples

Invalid State

Set aria-invalid on the checkbox and data-invalid on the field wrapper to show the invalid styles.

Invalid StateSource

Preview

Example requirements

Also uses: Field.

Basic

Pair the checkbox with Field and FieldLabel for proper layout and labeling.

BasicSource

Preview

Example requirements

Also uses: Field.

Description

Use FieldContent and FieldDescription for helper text.

DescriptionSource

Preview

Example requirements

Also uses: Field.

Disabled

Use the disabled prop to prevent interaction and add the data-disabled attribute to the <Field> component for disabled styles.

DisabledSource

Preview

Example requirements

Also uses: Field.

Group

Use multiple fields to create a checkbox list.

GroupSource

Preview

Example requirements

Also uses: Field.

Table

TableSource

Preview

Example requirements

Also uses: Table.

Reference

See the official Checkbox documentation for composition patterns and API details. This page uses the Preact port and examples from the pinned upstream revision.

Component source