Input
A flexible text input with 6 variants: default, filled, underline, floating, ghost, and glow.
Import
import { Input } from "@igorao79/uivix";Variants
Default
Standard bordered input
Filled
Input with a filled background
Underline
Input with only a bottom border
Ghost
Invisible border, background appears on hover/focus
Glow
Glowing violet border effect on focus
Floating Label
Floating
Label floats up on focus/input
Floating - All Sizes
Small, medium, and large
Floating - Controlled
Controlled floating input
Value: (empty)
With Icons
Left Icon
Input with an icon on the left
Right Icon
Input with an icon on the right
USD
Both Icons
Input with icons on both sides
Sizes
All Sizes
Small, medium, and large
States
Error
Input with error styling
Disabled
Input in disabled state
With Label
Input with Label
Combining Input with Label component
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "filled" | "underline" | "floating" | "ghost" | "glow" | "default" | The visual style of the input |
| inputSize | "sm" | "md" | "lg" | "md" | The size of the input |
| label | string | - | Floating label text (required for variant="floating") |
| leftIcon | ReactNode | - | Icon element shown on the left |
| rightIcon | ReactNode | - | Icon element shown on the right |
| error | boolean | false | Show error styling |
| disabled | boolean | false | Disable the input |
| labelClassName | string | - | Extra classes for the floating label |
| wrapperClassName | string | - | Extra classes for the wrapper div |
| className | string | - | Additional CSS classes |