Form

A dynamic form builder component that creates structured forms with multiple input types, validation, and flexible layouts. Perfect for generating contact forms, surveys, and data collection interfaces.

Example

Contact Form

Interactive Demo

Use natural language to generate and modify forms in real time. This interactive demo runs inside the showcase's app-level TamboProvider, which sets a per-user context key (persisted in localStorage).

AI-Generated Form

Tambo Conversations

Installation

npx tambo add form

Try It Yourself

1. Install the component

npx tambo add form

2. Register with Tambo

tsx

import { FormComponent, formSchema } from "@/components/tambo/form";
import { MessageThreadFull } from "@/components/tambo/message-thread-full";
import { useTambo } from "@tambo-ai/react";
import { useEffect } from "react";

export function App() {
  const { registerComponent } = useTambo();

  useEffect(() => {
    registerComponent({
      name: "FormComponent",
      description: "A dynamic form builder component.",
      component: FormComponent,
      propsSchema: formSchema,
    });
  }, [registerComponent]);

  return <MessageThreadFull />;
}

3. Send a prompt

Try these example prompts:

→ "Create a contact form with name, email, and message fields"
→ "Build a survey with radio buttons and a dropdown for age range"
→ "Make a compact registration form with email and password validation"

Component API

Form

Prop	Type	Default	Description
fields	FormField[]	-	Array of form field configurations
onSubmit	(data: Record<string, any>) => void	-	Callback function when form is submitted
onError	string	-	Optional error message to display
submitText	string	"Submit"	Text to display on the submit button
variant	"default" \| "solid" \| "bordered"	"default"	Visual style of the form container
layout	"default" \| "compact" \| "relaxed"	"default"	Spacing between form fields
className	string	-	Additional CSS classes for customization

FormField

Prop	Type	Default	Description
id	string	-	Unique identifier for the field
type	"text" \| "email" \| "number" \| "select" \| "textarea" \| "radio" \| "checkbox" \| "slider" \| "yes-no"	-	Type of input field to render
label	string	-	Label text displayed above the field
placeholder	string	-	Placeholder text shown in empty fields
options	string[]	-	Options for select, radio, and checkbox fields
required	boolean	false	Whether the field is required
description	string	-	Helper text displayed below the field