Adaptive Input
View in Storybook
Explore interactive examples and all component variations in our Storybook.
The AdaptiveInput component is an enhanced input field that supports left and right icons, input masking, and automatic formatting. It's perfect for phone numbers, credit cards, and other formatted inputs.
Basic Usage
With Icons
With Masks
Both Icons
Different Sizes
Properties
AdaptiveInput
| Property | Type | Description |
|---|---|---|
leftIcon | React.ReactNode | Icon to display on the left side of the input. |
rightIcon | React.ReactNode | Icon to display on the right side of the input. |
mask | string | Input mask pattern. Use 0 for digits, other characters are treated as literals. |
sizing | "sm" | "md" | "lg" | "xl" | "2xl" | Size of the input field. |
placeholder | string | Placeholder text for the input. |
type | string | HTML input type (text, email, password, etc.). |
disabled | boolean | If true, the input is disabled. |
className | string | Additional CSS classes. |
All other props from the base Input component are also supported.
Mask Patterns
The mask prop uses a simple pattern where:
0represents a digit placeholder- Other characters are treated as literals
Common Mask Examples
| Pattern | Example | Use Case |
|---|---|---|
(000) 000-0000 | (555) 123-4567 | US Phone Number |
+00 0000-0000 | +1 5551-2345 | International Phone |
0000 0000 0000 0000 | 1234 5678 9012 3456 | Credit Card |
00/00/0000 | 12/25/2024 | Date |
00000-000 | 12345-678 | ZIP Code |
Customization
You can customize the appearance of the AdaptiveInput using CSS classes or Tailwind CSS.
The AdaptiveInput component extends the base Input component with additional functionality for icons and masking, making it perfect for forms that require formatted input fields.