Text Input

A versatile text input component supporting multiple types, validation states, and customization options for collecting user text input.

Basic Text Input

Email Address

Input Types

Password

Phone

Website

Amount

Required Field

Username*

Username is required

With Helper Text

We'll never share your email with anyone else.

Validation States

Valid Email

Invalid Email

Please enter a valid email address

With Icons (Prefix/Suffix)

Password

Character Count

Username

Must be 20 characters or less

0 / 20

Disabled

Disabled Input

Props

Name	Type	Default	Description
`label*`	`string`	-	Input label text
`type`	`'text' \| 'email' \| 'password' \| 'number' \| 'search' \| 'tel' \| 'url'`	`'text'`	HTML input type
`placeholder`	`string`	-	Placeholder text
`value`	`string`	-	Controlled value
`defaultValue`	`string`	-	Uncontrolled default value
`disabled`	`boolean`	`false`	Whether input is disabled
`required`	`boolean`	`false`	Whether input is required (shows * indicator)
`error`	`string`	-	Error message to display
`helperText`	`string`	-	Helper text below input
`showValidIcon`	`boolean`	`true`	Show check icon when valid
`showErrorIcon`	`boolean`	`true`	Show X icon when error
`showPasswordToggle`	`boolean`	`true`	Show eye icon for password type
`maxLength`	`number`	-	Maximum character length
`showCharCount`	`boolean`	`false`	Show character count (requires maxLength)
`leadingIcon`	`ReactNode`	-	Content before input (icon, text)
`trailingIcon`	`ReactNode`	-	Content after input (icon, text)
`onChange`	`(e: ChangeEvent) => void`	-	Change event handler

Usage Guidelines

When to use

•For collecting single-line text input from users
•For forms that require specific input types (email, password, phone)
•When validation feedback needs to be displayed inline
•For search functionality or filtering data

Best practices

•Use clear, descriptive labels that tell users what to input
•Provide helpful placeholder text as examples, not instructions
•Show validation errors immediately after user interaction
•Use appropriate input types for better mobile keyboard support
•Include helper text for complex or important fields
•Use leading icons to clarify the input purpose (search, email, etc.)

Accessibility

•Keyboard accessible with Tab, Enter, and Escape keys
•ARIA attributes: aria-invalid, aria-describedby, aria-required
•Error messages announced with aria-live regions
•Focus indicators visible with 2px ring for keyboard navigation
•Labels properly associated with inputs using htmlFor
•Required fields indicated with asterisk and aria-required

Do's and Don'ts

✓ Do

•Use descriptive labels that clearly indicate what input is expected
•Provide immediate validation feedback after user interaction
•Use appropriate input types (email, tel, url) for better UX
•Include helper text for complex requirements or formatting
•Use leading icons to make the input purpose immediately clear

Email Address

We'll send a confirmation to this address

✗ Don't

•Don't use vague labels like "Input" or "Field"
•Don't use placeholder text as a substitute for labels
•Don't validate before the user has finished typing
•Don't use generic error messages like "Invalid input"
•Don't disable inputs without explanation or alternative

Input

Invalid

Related Components

Textarea

For multi-line text input

Select

For selecting from a list of options

Checkbox

For boolean or multi-select input