Float Input
Input with floating label that animates on focus
import { FloatingLabelInput } from "@plexui/ui/components/FloatingLabelInput";Examples
Overview
Filled state
Textarea
multiline
With error message
Email is not valid.
With description
We'll never share your email with anyone else.
With description and error
Email is not valid.
We'll never share your email with anyone else.
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
Select
Role
Country select
Country
Phone input
+34
Reference
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Floating label text |
description | ReactNode | — | Helper text below the input |
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 |
startAdornment | ReactNode | — | Content rendered before the input, inside the field. Visible when focused or has value. |
endAdornment | ReactNode | — | Content rendered after the input, before the clear button |
multiline | boolean | false | Render as an auto-growing textarea |
rows | number | 2 | Initial visible text lines when multiline is true |