Checkbox

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

Preview

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/checkbox.json

Usage

tsx
10 lines
1
2
3
4
5
6
7
8
9
10
import { Checkbox } from "@/components/ui/checkbox"

export default function MyComponent() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="terms" />
      <label htmlFor="terms">Accept terms</label>
    </div>
  )
}

Examples

With Text

You agree to our Terms of Service and Privacy Policy.

Disabled

Checkbox Group

On Success Color

Blue

Red

Green

Purple

Orange

Props

PropTypeDefaultDescription
checkedbooleanControlled checked state
onSuccessColor'red' | 'blue' | 'green' | 'purple' | 'orange' | 'default'defaultColor of the checkbox
defaultCheckedbooleantrueDefault checked state
onCheckedChange(checked: boolean) => voidCalled when checked state changes
disabledbooleanfalseDisable the checkbox