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.

Example

User Registration Fields

Username*

Must be 3-20 alphanumeric characters

Email*

We'll use this for account notifications

Password*

Must be at least 8 characters long

Age

Must be between 1-150

Interactive Demo

Use natural language to generate and modify input fields 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 Input Fields

Tambo Conversations

Installation

npx tambo add input-fields

Try It Yourself

1. Install the component

npx tambo add input-fields

2. Register with Tambo

tsx

import {
  InputFields,
  inputFieldsSchema,
} from "@/components/tambo/input-fields";
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: "InputFields",
      description: "A focused collection of input fields.",
      component: InputFields,
      propsSchema: inputFieldsSchema,
    });
  }, [registerComponent]);

  return <MessageThreadFull />;
}

3. Send a prompt

Try these example prompts:

→ "Create sign-up fields with email and password validation"
→ "Add a phone field with pattern validation and helper text"
→ "Build a profile editor with username, email, and age inputs"

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