Design System Builder

Checkbox

Checkbox is a component component that provides checkbox functionality.

Active

Examples

size

Different size options for the Checkbox component.

default

sm

lg

Installation

npm install @your-design-system/checkbox
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

export function CheckboxDemo() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="terms" />
      <Label
        htmlFor="terms"
        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
      >
        Accept terms and conditions
      </Label>
    </div>
  )
}

API Reference

PropTypeDefaultDescription
checkedbooleanfalse

The checked prop for the component.

disabledbooleanfalse

Whether the component is disabled.

idstring-

The id prop for the component.

namestring-

The name prop for the component.

valuestring-

The value prop for the component.

onCheckedChangestring-

The onCheckedChange prop for the component.

Styling

The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.

Base Classes

size Variants

default

h-4w-4

sm

h-3w-3

lg

h-5w-5

Design System Compliance

This component is validated against atomic design principles and foundation token usage.