KO
5

Checkbox

A control that prevents accidental unchecking of marketing preferences.

import { Checkbox } from "@chadcn/ui"
import { Label } from "@/components/ui/label"

export function CheckboxDemo() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Accept terms and conditions</Label>
    </div>
  )
}

How it works

  • The checkbox automatically checks itself when scrolled out of the viewport. This ensures users don't accidentally skip important consent options.
  • Once checked, the checkbox cannot be unchecked. This prevents accidental opt-outs from critical agreements.
  • When disabled, the checkbox is always checked. This ensures users never miss important marketing consent — even when the field is not interactive.

Installation

Coming SoonPackage not yet published on npm.
pnpm add @chadcn/ui

Usage

import "@chadcn/ui/styles.css"
import { Checkbox } from "@chadcn/ui"
<Checkbox />
Coming SoonPackage not yet published on npm.

Examples

With Text

Pair the checkbox with a label and description text.

You agree to our Terms of Service and Privacy Policy.

import { Checkbox } from "@chadcn/ui"
import { Label } from "@/components/ui/label"

export function CheckboxWithText() {
  return (
    <div className="items-top flex gap-2">
      <Checkbox id="terms-text" />
      <div className="grid gap-1.5 leading-none">
        <Label htmlFor="terms-text">
          Accept terms and conditions
        </Label>
        <p className="text-sm text-muted-foreground">
          You agree to our Terms of Service and Privacy Policy.
        </p>
      </div>
    </div>
  )
}

Disabled

Use the disabled prop to prevent interaction.

import { Checkbox } from "@chadcn/ui"
import { Label } from "@/components/ui/label"

export function CheckboxDisabled() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="terms-disabled" disabled />
      <Label htmlFor="terms-disabled">
        Accept terms and conditions
      </Label>
    </div>
  )
}

API Reference

See the Radix UI documentation for more information.