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.
Examples
This interactive demo runs inside the showcase's app-level TamboProvider, which sets a per-user context key (persisted in localStorage).
Contact Form
Tambo Conversations
Loading threads...
Installation
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 |