kagadmodyaa

Checkbox

LabelSwitch

A checkbox with checked, unchecked and indeterminate states.

import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'

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

Built on Base UI

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/checkbox.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Checkbox imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'

<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

Examples

Disabled

import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'

export default function CheckboxDisabled() {
  return (
    <div className="grid gap-3">
      <div className="flex items-center gap-2">
        <Checkbox id="checkbox-disabled-off" disabled />
        <Label htmlFor="checkbox-disabled-off">Disabled, unticked</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="checkbox-disabled-on" disabled defaultChecked />
        <Label htmlFor="checkbox-disabled-on">Disabled, ticked</Label>
      </div>
    </div>
  )
}

API Reference

NameTypeDefaultDescription
checkedboolean—Controlled checked state. Use defaultChecked for uncontrolled.
defaultCheckedbooleanfalseInitial checked state (uncontrolled).
indeterminatebooleanfalseRenders a mixed / partially-checked state.
disabledbooleanfalseIgnores user interaction.
onCheckedChange(checked: boolean) => void—Called when the checkbox is ticked or unticked.