Checkbox

Forms

About

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.

Code

How Checkbox is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Checkbox from "@/components/ui/checkbox";
import type { ComponentProps } from "react";

export default function Example() {
  return (
    <Checkbox
      checkedIcon={<CheckedIcon className="text-red-600 dark:text-red-400" />}
      uncheckedIcon={<UncheckedIcon />}
    />
  );
}

const UncheckedIcon = (props: ComponentProps<"svg">) => (
  <svg
    {...props}
    aria-hidden={true}
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    viewBox="0 0 24 24"
  >
    <path d="M0 0h24v24H0z" fill="none" />
    <path
      fill="currentColor"
      d="M11.29 20.66c.2.2.45.29.71.29s.51-.1.71-.29l7.5-7.5c2.35-2.35 2.35-6.05 0-8.41c-2.3-2.28-5.85-2.35-8.21-.2c-2.36-2.15-5.91-2.09-8.21.2c-2.35 2.36-2.35 6.06 0 8.41zM5.21 6.16C6 5.38 7 4.99 8.01 4.99s2.01.39 2.79 1.17l.5.5c.39.39 1.02.39 1.41 0l.5-.5c1.56-1.56 4.02-1.56 5.59 0c1.56 1.57 1.56 4.02 0 5.58l-6.79 6.79l-6.79-6.79a3.91 3.91 0 0 1 0-5.58Z"
    />
  </svg>
);

const CheckedIcon = (props: ComponentProps<"svg">) => (
  <svg
    {...props}
    aria-hidden={true}
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    viewBox="0 0 24 24"
  >
    <path d="M0 0h24v24H0z" fill="none" />
    <path
      fill="currentColor"
      d="M11.29 20.69c.2.2.45.29.71.29s.51-.1.71-.29l7.5-7.5c2.35-2.35 2.35-6.05 0-8.41c-2.29-2.29-5.84-2.35-8.21-.2c-2.36-2.15-5.91-2.09-8.21.2c-2.35 2.36-2.35 6.06 0 8.41z"
    />
  </svg>
);