Button Card

The Button Card field turns each option into a full-width card containing an icon, title and description—great for pricing plans, transport modes, etc.

Properties

Property	Type	Required	Description
type	"button-card"	Yes	Identifies the field
options	ButtonCardOption[]	Yes	Array with value, text, description, optional icon
multiple	boolean	No	Allow multi-select cards

Example

Preferred transport

button-card-example.tsx

import { Bike, Bus, Car } from "lucide-react";
import { z } from "zod";
import { createExampleForm } from "../createExampleForm";

export const TransportButtonCard = createExampleForm({
  formId: "transport-button-card",
  layout: {
    columns: {
      default: 1,
      sm: 1,
      md: 1,
      lg: 1,
      xl: 1,
    },
  },
  fields: {
    transport: {
      type: "button-card",
      label: "Preferred Transport",
      multiple: false,
      options: [
        {
          value: "car",
          text: "Car",
          description: "Fast and comfortable",
          icon: <Car />,
        },
        {
          value: "bike",
          text: "Bike",
          description: "Eco-friendly and healthy",
          icon: <Bike />,
        },
        { value: "bus", text: "Bus", description: "Economic", icon: <Bus /> },
      ],
      schema: z.string().min(1),
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["transport"],
    },
  },
  successMessage: (values) => {
    const transportLabels: Record<string, string> = {
      car: "Car",
      bike: "Bike",
      bus: "Bus",
    };
    const selectedTransport =
      transportLabels[values.transport as string] || values.transport;
    return `
      <div class="text-center">
        <p>✅ Thank you for your selection!</p>
        <p>You chose <strong>${selectedTransport}</strong> as your preferred transport.</p>
      </div>
    `;
  },
});

UX hints

• Use concise text for the card header and a short description.
• Provide meaningful icons to improve recognition.
• Keep all cards in a single column for readability.