Nusa UINusa UI

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

registry/examples/checkbox-demo.tsx
import { Checkbox } from "@/registry/ui/checkbox"

export default function CheckboxDemo() {

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nusa-ui.vercel.app/r/checkbox.json

Usage

import { Checkbox } from "@/components/ui/checkbox"
<Checkbox />

Examples

With Label

registry/examples/checkbox-with-label.tsx
import { Checkbox } from "@/registry/ui/checkbox"
import { Label } from "@/registry/ui/label"

Disabled

registry/examples/checkbox-disabled.tsx
import { Checkbox } from "@/registry/ui/checkbox"
import { Label } from "@/registry/ui/label"

With Text

registry/examples/checkbox-with-text.tsx
import { Checkbox } from "@/registry/ui/checkbox"
import { Label } from "@/registry/ui/label"

API Reference

Checkbox

PropTypeDefaultDescription
checkedboolean | "indeterminate"-The controlled checked state
defaultCheckedboolean-The default checked state
onCheckedChange(checked: boolean | "indeterminate") => void-Callback when checked changes
disabledbooleanfalseDisable the checkbox
requiredbooleanfalseMark as required
namestring-The name for form submission
valuestring"on"The value for form submission