Inputs

A flexible input component supporting multiple sizes, icon placement, and all standard HTML input types. Perfect for building forms and data entry interfaces.

Installation

Import

Usage

Use Input for text-based form fields. Choose appropriate input types for better validation and mobile keyboard support. Use icons to provide visual context. Size inputs appropriately for your form layout. Use disabled state for unavailable fields and readonly for display-only values. For form integration with validation and error handling, use TextField which extends Input and integrates with Conform forms. TextField automatically displays validation errors from form schemas and provides label, topText, and rightAddon props for enhanced form UX.

Design Guidelines

Maintain consistent input sizing throughout your application. Use icons sparingly and only when they add value. Group related inputs visually. Provide clear feedback for validation states. Use appropriate input types for better UX on mobile devices.

Basic Usage

Simple text inputs with different sizes

Login Form with Icons

Registration Form with All Input Types

Registration form demonstrating various input types (text, email, tel, password, number, url)

Input Sizes

Demonstrating different input sizes (sm, md, lg, xl) in a form

Input States (Disabled, Readonly, Required)

Demonstrating disabled, readonly, and required input states in a form

Icons and Visual Indicators

Demonstrating left and right icons for visual context and feedback

Complete User Profile Form

Comprehensive form showcasing all TextField features: types, icons, sizes, states, topText, and validation

TextField

TextField extends Input with form integration, labels, error handling, and validation support. Use TextField when building forms with Conform. packages.composedComponents.extends Input. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2

packages.propsTable.headers.name	packages.propsTable.headers.type	packages.propsTable.headers.default	packages.propsTable.headers.description
`field`	`FieldMetadata`	—	Conform field metadata for form integration and validation
`label`	`string \| React.ReactNode`	—	Label text displayed above the input field
`topText`	`string \| React.ReactNode`	—	Helper text displayed above the label
`rightAddon`	`React.ReactNode`	—	Additional content displayed on the right side of the input
`labelProps`	`React.LabelHTMLAttributes<HTMLLabelElement>`	—	Additional props for the label element
`inputClass`	`string`	—	Additional CSS classes for the input element
`wrapperClassName`	`string`	—	Additional CSS classes for the wrapper element
`inputRef`	`React.Ref<HTMLInputElement>`	—	Ref forwarded to the input element
`className`	`string`	—	packages.commonProps.className.description

packages.sections.api

Component props and API reference This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. For detailed documentation and examples, see the Style Props documentation.

packages.propsTable.headers.name	packages.propsTable.headers.type	packages.propsTable.headers.default	packages.propsTable.headers.description
`inputSize`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	Size of the input field
`leftIcon`	`IconName \| IconProps`	—	Icon to display on the left side of the input
`rightIcon`	`IconName \| IconProps`	—	Icon to display on the right side of the input
`type`	`string`	`"text"`	HTML input type (text, email, password, number, tel, url, search, date, time, etc.)
`placeholder`	`string`	—	Placeholder text displayed when input is empty
`value`	`string`	—	Controlled input value
`defaultValue`	`string`	—	Uncontrolled input default value
`disabled`	`boolean`	`false`	Whether the input is disabled
`readOnly`	`boolean`	`false`	Whether the input is read-only
`required`	`boolean`	`false`	Whether the input is required
`onChange`	`(event: React.ChangeEvent<HTMLInputElement>) => void`	—	Callback fired when the input value changes
`className`	`string`	—	packages.commonProps.className.description

Accessibility

Accessibility features and considerations

Inputs include proper ARIA attributes when used with labels. Use the htmlFor attribute on labels to associate them with inputs. Provide clear placeholder text and error messages. Ensure sufficient color contrast for all states.

packages.title