Float Input
Input with floating label that animates on focus
import { FloatingLabelInput } from "@plexui/ui/components/FloatingLabelInput";Examples
Overview
Filled state
With error message
Email is not valid.
Clear button
Disabled
Read only
All states
Empty
Filled
Invalid
Disabled
Read only
Password input
Password with visibility toggle
SSN input
Birthday input
Birthday with validation
Please enter a valid date.
Birthday states
Empty
Filled
Invalid
Disabled
About You form
Tell us about you
This helps us customize your experience.
Country select
Country
About You form with country
Tell us about you
This helps us customize your experience.
Reference
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Floating label text |
errorMessage | string | — | Validation message below input; sets invalid state |
disabled | boolean | false | Disable input interactions |
invalid | boolean | false | Invalid visual state |
readOnly | boolean | false | Read-only input state |
onClear | () => void | — | Shows a clear button when input has value |
endAdornment | ReactNode | — | Content rendered after the input, before the clear button |