Checkbox Simple

Installation

Usage

import CheckboxSimple from "@/components/ruixen/checkbox-simple";
 
export default function MyComponent() {
  return (
    <div className="flex flex-col gap-4">
      <CheckboxSimple label="Accept notifications" />
      <CheckboxSimple
        label="Subscribe to newsletter"
        description="Get updates about new features"
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
`checked`	`boolean`	-	Controlled checked state
`defaultChecked`	`boolean`	`false`	Default checked state
`onCheckedChange`	`(checked: boolean) => void`	-	Callback when state changes
`label`	`string`	-	Label text
`description`	`string`	-	Optional description text
`disabled`	`boolean`	`false`	Disable the checkbox
`className`	`string`	-	Additional CSS classes

Features

Clean, minimal design
Optional label and description
Controlled and uncontrolled modes
Accessible focus states
Light and dark mode support