Animated Input
Buttons
A floating-label text input with animated border, focus ring, optional left/right icons, error state, and three sizes (sm, md, lg).
Loading preview...
Customize
Size:
Label
Placeholder
Disabled
Error
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | undefined | Floating label text displayed above the input. |
placeholder | string | undefined | Placeholder text shown when the label is floating. |
value | string | '' | Controlled input value. |
onChange | (e: React.ChangeEvent<HTMLInputElement>) => void | undefined | Change handler for the input. |
error | string | undefined | Error message displayed below the input. |
disabled | boolean | false | Disables the input. |
size | 'sm' | 'md' | 'lg' | 'md' | Input size variant. |
leftIcon | React.ReactNode | undefined | Icon rendered on the left side of the input. |
rightIcon | React.ReactNode | undefined | Icon rendered on the right side of the input. |
className | string | '' | Additional CSS classes. |
type | string | 'text' | HTML input type attribute. |