Choicebox

Forms 1

About

A list of radio or checkbox options rendered as selectable cards with a title, optional description, and optional right-aligned meta label, for picking one or several named choices.

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

Code

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

Usage.tsx

import Choicebox from "@/components/ui/choicebox";
import { useState } from "react";

export default function ChoiceboxMultipleDemo() {
  const [tools, setTools] = useState(["intercom", "linear"]);
  return (
    <div style={{ width: 360 }}>
      <Choicebox
        multiple
        value={tools}
        onChange={setTools}
        options={[
          {
            id: "intercom",
            title: "Intercom",
            description: "Read and reply to the support inbox.",
          },
          {
            id: "linear",
            title: "Linear",
            description: "Create and update issues.",
          },
          {
            id: "stripe",
            title: "Stripe",
            description: "Look up invoices and issue refunds.",
          },
        ]}
      />
    </div>
  );
}