FormCard Beta

FormCard collects a small set of structured fields during a chat flow.

import { FormCard } from "@/components/fable-ui/form-card/form-card"

export function CollectRefundReason() {
  return (
    <FormCard
      title="Collect refund reason"
      description="The host validates submitted values before writing."
      fields={[
        { name: "reason", label: "Reason", type: "textarea", required: true },
        { name: "notify", label: "Notify customer", type: "toggle" },

Installation#

pnpm dlx shadcn@latest add shobky/fable-ui/form-card

Installed files include:

Copycomponents/fable-ui/form-card/form-card.tsx
components/fable-ui/form-card/index.ts
lib/fable-ui/tools/collect-input-tool.ts
lib/fable-ui/manifests/collect-input.md

The component depends on shared Fable core plus shadcn card, button, input, and textarea primitives.

Usage#

Copyimport { FormCard } from "@/components/fable-ui/form-card/form-card"
 
export function CollectRefundReason() {
  return (
    <FormCard
      title="Collect refund reason"
      description="The host validates submitted values before writing."
      fields={[
        { name: "reason", label: "Reason", type: "textarea", required: true },
        { name: "notify", label: "Notify customer", type: "toggle" },
      ]}
    />
  )
}

Tool#

The AI SDK tool name is collect_input.

Supported field types are text, number, select, date, textarea, and toggle. Keep v1 forms short. Server-side validation remains mandatory.

Use this for missing structured values, not for long multi-step workflows. The host receives submitted values and validates them before any side effect.

The playground's mock credential mode can render a valid collect_input tool call without a live provider. Ask for a form, or ask for an invalid form payload to verify the component-level error state.

States#

The preview shows ready, loading, empty, error, and disabled states. Disabled form fields are useful when submitted values are being checked or when the host app needs to prevent duplicate submissions.

Manifest#

The manifest tells the model when to ask for a small structured input handoff. Read the Manifests guide for the shared format.

---
tool: collect_input
type: registry:component
---

# collect_input

Use `collect_input` for a short, structured mid-conversation form.

Valid payloads need a title and one to eight fields. Supported field types are `text`, `number`, `select`, `date`, `textarea`, and `toggle`; `select` fields need non-empty string options.

Keep v1 forms simple. The host app must validate submitted values server-side and decide what to do with them.