Components

Checkbox

A control that allows the user to toggle between checked and not checked. Typically used in forms alongside a label.

example.tsx

Accept terms and conditions

Import

tsx

import { AppCheckbox } from "@/components/primitives/AppCheckbox"

With a label

Always pair a checkbox with an AppLabel using matching id and htmlFor values so that clicking the label also toggles the checkbox.

tsx

<div className="flex items-center gap-2">
  <AppCheckbox id="newsletter" />
  <AppLabel htmlFor="newsletter">Subscribe to newsletter</AppLabel>
</div>

With description

Add a description below the label to provide additional context.

Enable notifications

You can enable or disable notifications at any time.

Disabled

Pass the disabled prop to prevent interaction. Works for both unchecked and pre-checked states.

Disabled (unchecked)

Disabled (checked)

Checkbox group

Stack multiple checkboxes for multi-select scenarios. Each checkbox is independent — there is no shared group state.

Notify me about...

New comments

Direct mentions

Product updates

API Reference

AppCheckbox extends the Radix UI Checkbox primitive.

Prop	Type	Default	Description
checked	boolean \| 'indeterminate'	—	Controlled checked state.
defaultChecked	boolean	false	Initial checked state when uncontrolled.
onCheckedChange	(checked: boolean \| 'indeterminate') => void	—	Callback fired when the checked state changes.
disabled	boolean	false	Prevents interaction and reduces opacity.
required	boolean	false	Marks the checkbox as required in a form.
name	string	—	Submitted with its owning form as part of a name/value pair.
value	string	'on'	The value given as data when submitted in a form.
className	string	—	Additional Tailwind classes merged via cn(). Prefer the wrapper pattern for reusable overrides.

Source

src/components/primitives/AppCheckbox.tsx

"use client"

import { Checkbox as CheckboxPrimitive } from "../ui/checkbox"

type AppCheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive>

function AppCheckbox(props: AppCheckboxProps) {
  return <CheckboxPrimitive {...props} />
}

export { AppCheckbox }