Choicebox

Forms 2

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 ChoiceboxTitlesOnlyDemo() {
  const [inbox, setInbox] = useState("support");
  return (
    <div style={{ width: 280 }}>
      <Choicebox
        value={inbox}
        onChange={setInbox}
        options={[
          { id: "support", title: "Support", meta: "42" },
          { id: "billing", title: "Billing", meta: "9" },
          { id: "sales", title: "Sales", meta: "3" },
        ]}
      />
    </div>
  );
}