Checkbox

Forms

About

An accessible checkbox input with a label, optional hint/error text, and an indeterminate "select all" state for parent/child selections in forms.

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

"use client";

import * as React from "react";
import Checkbox from "@/components/ui/checkbox";

export default function CheckboxDemo() {
  const [agreed, setAgreed] = React.useState(false);

  return (
    <Checkbox
      checked={agreed}
      onChange={(e) => setAgreed(e.target.checked)}
      hint="Manuscripts must be back within forty days."
    >
      I'll return the manuscript to the House of Wisdom
    </Checkbox>
  );
}