Input
Text input with variant system, icon slots, character counting, input masking, and validation state indicators
Input
Text field component with variants, sizes, icons, validation and accessibility built-in.
Variants
Use the variant prop to switch between default, outline, filled, subtle and glass styles while keeping label, helper text and error handling consistent.
Soft bordered input
High contrast outline
Filled background
Very light background
Glassmorphism surface
No visible border
Sizes
Choose from xs, sm, md, lg and xl to match your layout density.
Icons & adornments
Add leading and trailing icons using startIcon and endIcon. Combine with variants and sizes to build search bars, email fields and password inputs.
Only letters, numbers and underscores
Validation
Drive visual feedback through error, helperText and status variants such as success, warning or error.
Looks good!
This username might be taken
Please enter a valid email
Field is required
Input types
Use the type prop for email, password, number and other browser-supported input types.
Disabled & full width
Use disabled to prevent editing and fullWidth (or className) to stretch the input across its container.
Wrap inside a parent with constrained width to control layout.
Login form example
Combine inputs, labels, icons and helper text to build a simple login form. This example focuses on layout rather than validation logic.
Sign in
Usage Guidelines
When to Use
- Text input fields
- Search inputs
- Password fields
- Masked inputs
Accessibility
- Label association with htmlFor
- Error linked with aria-describedby
- Required state announced
Performance
- Native input performance
- Debounced validation
Common Mistakes
- Missing associated label
- Placeholder as only label
- Not handling paste events
Frequently Asked Questions
Related Components
View allAsynchronous search input with debounced queries, virtual scrolling for large datasets, and keyboard-driven selection
Accessible checkbox input with indeterminate state support and form integration
Accessible CheckboxGroup for multi-selection, and form integration
Color selection component with preset colors, HEX/RGB/HSL input, and visual picker interface