Checkbox

A checkbox input for binary choices, settings and form preferences, with controlled/uncontrolled modes, semantic colors, sizes and custom icon slots — ported to React from the RockSolid SolidJS component library by Darshan Rajadhyaksha.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Checkbox to your project and fits it to your theme.

import Checkbox from "@/components/ui/checkbox";

export default function Example() {
  return (
    <Checkbox
      defaultChecked
      slotProps={{
        base: {
          className: `
            text-purple-600
            dark:text-purple-400
            hover:text-purple-700
            dark:hover:text-purple-300
          `,
        },
      }}
    />
  );
}