Checkbox Colored

Installation

Usage

import CheckboxColored from "@/components/ruixen/checkbox-colored";
 
export default function MyComponent() {
  return (
    <div className="flex gap-4">
      <CheckboxColored label="Blue" color="blue" />
      <CheckboxColored label="Green" color="green" />
      <CheckboxColored label="Red" color="red" />
    </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
`color`	`"default" \| "blue" \| "green" \| "red" \| "yellow" \| "purple" \| "pink"`	`"default"`	Checkbox color theme
`disabled`	`boolean`	`false`	Disable the checkbox
`className`	`string`	-	Additional CSS classes

Features

Seven color themes available
Consistent styling across colors
Color-matched focus rings
Accessible focus states
Light and dark mode support