Choicebox

Pricing

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 ChoiceboxWithMetaDemo() {
  const [cap, setCap] = useState("50");
  return (
    <div style={{ width: 360 }}>
      <Choicebox
        value={cap}
        onChange={setCap}
        options={[
          {
            id: "50",
            title: "Small refunds",
            description: "No approval needed.",
            meta: "$50",
          },
          {
            id: "200",
            title: "Standard refunds",
            description: "Sam Keller is notified.",
            meta: "$200",
          },
          {
            id: "500",
            title: "Large refunds",
            description: "Dana Ruiz approves each one.",
            meta: "$500",
          },
        ]}
      />
    </div>
  );
}