Input Fields
A focused collection of input fields optimized for data entry and user information capture with advanced validation, autocomplete support, and comprehensive field types. Perfect for building registration forms, profile editors, 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).
User Registration Fields
Tambo Conversations
Loading threads...
Installation
Component API
InputFields
| Prop | Type | Default | Description |
|---|---|---|---|
| fields | InputField[] | [] | Array of input field configurations |
| variant | "default" | "solid" | "bordered" | "default" | Visual style of the container |
| layout | "default" | "compact" | "relaxed" | "default" | Spacing between input fields |
| className | string | - | Additional CSS classes for customization |
InputField
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | - | Unique identifier for the field |
| type | "text" | "email" | "password" | "number" | - | Type of input field to render |
| label | string | - | Label text displayed above the field |
| placeholder | string | - | Placeholder text shown in empty fields |
| required | boolean | false | Whether the field is required |
| disabled | boolean | false | Whether the field is disabled |
| description | string | - | Helper text displayed below the field |
| minLength | number | - | Minimum character length for validation |
| maxLength | number | - | Maximum character length for validation |
| pattern | string | - | Regular expression pattern for validation |
| autoComplete | string | - | Autocomplete attribute for browser support |
| error | string | - | Error message displayed below the field |