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

User Registration Fields

Tambo Conversations

Loading threads...

Installation

$
npx tambo add input-fields

Component API

InputFields

PropTypeDefaultDescription
titlestring-Section heading displayed at the top
descriptionstring-Optional description text below the title
fieldsInputField[][]Array of input field configurations
variant"solid" | "bordered""solid"Visual style of the container
layout"compact" | "relaxed""compact"Spacing between input fields
classNamestring-Additional CSS classes for customization

InputField

PropTypeDefaultDescription
namestring-Unique identifier for the field
labelstring-Label text displayed above the field
type"text" | "email" | "password" | "number" | "tel""text"Type of input field to render
requiredbooleanfalseWhether the field is required
disabledbooleanfalseWhether the field is disabled
placeholderstring-Placeholder text shown in empty fields
descriptionstring-Helper text displayed below the field
minLengthnumber-Minimum character length for validation
maxLengthnumber-Maximum character length for validation
patternstring-Regular expression pattern for validation
autoCompletestring-Autocomplete attribute for browser support