Choicebox

Forms 6

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 ChoiceboxDemo() {
  const [mode, setMode] = useState("confirm");
  return (
    <div style={{ width: 360 }}>
      <Choicebox
        value={mode}
        onChange={setMode}
        options={[
          {
            id: "suggest",
            title: "Suggest",
            description: "Alpha drafts replies. You send them.",
          },
          {
            id: "confirm",
            title: "Confirm",
            description: "Alpha asks before it sends or refunds.",
          },
          {
            id: "auto",
            title: "Autonomous",
            description: "Alpha acts and reports back.",
          },
        ]}
      />
    </div>
  );
}