Input

View in Storybook

Explore interactive examples and all component variations in our Storybook.

The Input component provides a styled text input field with multiple size variants. Built with accessibility and customization in mind, it supports all standard HTML input attributes and integrates seamlessly with forms.

Basic Usage

Input Sizes

Input Types

Input States

Form Example

First Name

Last Name

Email Address

Phone Number

File Input

Upload File

Upload Image

Properties

Input

Property	Type	Description
sizing	"sm" | "md" | "lg" | "xl" | "2xl"	The size variant of the input. Default: "md".
type	string	The HTML input type (text, email, password, etc.).
placeholder	string	Placeholder text displayed when the input is empty.
disabled	boolean	Whether the input is disabled.
readOnly	boolean	Whether the input is read-only.
required	boolean	Whether the input is required for form submission.
value	string	The controlled value of the input.
defaultValue	string	The default value for uncontrolled inputs.
onChange	(event: ChangeEvent<HTMLInputElement>) => void	Event handler called when the input value changes.
onFocus	(event: FocusEvent<HTMLInputElement>) => void	Event handler called when the input receives focus.
onBlur	(event: FocusEvent<HTMLInputElement>) => void	Event handler called when the input loses focus.
className	string	Additional CSS classes for custom styling.
id	string	The HTML id attribute for the input.
name	string	The HTML name attribute for the input.
autoComplete	string	The HTML autocomplete attribute.
autoFocus	boolean	Whether the input should automatically receive focus.

Size Variants

Size	Height	Font Size	Padding	Use Case
sm	32px	12px	8px	Compact forms, tables, tight spaces
md	40px	14px	12px	General use, most forms (default)
lg	48px	16px	16px	Prominent forms, landing pages
xl	56px	18px	20px	Hero sections, important CTAs
2xl	64px	20px	24px	Large displays, accessibility needs

Accessibility

The Input component includes comprehensive accessibility features:

• Keyboard Navigation - Full keyboard support for all interactions
• Screen Reader Support - Proper labeling and ARIA attributes
• Focus Management - Clear focus indicators and logical tab order
• Form Integration - Works seamlessly with form validation
• Error States - Supports validation styling and error messages
• Required Fields - Proper indication of required vs optional fields

Common Use Cases

The Input component is perfect for:

• Contact Forms - Name, email, phone, message fields
• User Registration - Account creation and profile setup
• Search Functionality - Search bars and filter inputs
• Settings Panels - Configuration and preference inputs
• Data Entry - Forms for creating and editing content
• Authentication - Login, signup, password reset forms
• File Uploads - Document and media file selection

Best Practices

1. Appropriate Labels - Always provide clear, descriptive labels
2. Placeholder Text - Use helpful placeholder text that doesn't replace labels
3. Input Types - Use specific input types for better UX (email, tel, url)
4. Validation - Provide clear validation feedback and error messages
5. Size Selection - Choose appropriate sizes for the context and importance
6. Required Fields - Clearly indicate which fields are required
7. Autocomplete - Use autocomplete attributes for better user experience
8. Mobile Optimization - Ensure inputs work well on touch devices