Float Input
Text input whose label floats above the value, with error and helper text, a clear button, a password reveal toggle, and a multi-line variant.
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
SSN input
Birthday input
Birthday with validation
Please enter a valid date.
Birthday states
Empty
Filled
Invalid
Disabled
Select
Role
Multiple selection
Skills
Country select
Country
Phone input
+34
API
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Required. Floating label text |
value | string | — | Controlled value, with onChange |
defaultValue | string | — | Initial value when uncontrolled |
errorMessage | string | — | Validation message below input; sets invalid state |
invalid | boolean | false (true if errorMessage) | Invalid visual state |
description | ReactNode | — | Helper text below the input |
disabled | boolean | false | Disable input interactions |
readOnly | boolean | false | Read-only input state |
type | string | "text" | Input type; password gets a reveal toggle |
revealable | boolean | true for password without an endAdornment | Built-in reveal toggle |
multiline | boolean | false | Render as an auto-growing textarea |
rows | number | 2 | Initial visible text lines when multiline is true |
allowAutofillExtensions | boolean | false | Let password-manager extensions decorate the input |
startAdornment | ReactNode | — | Content rendered before the input, inside the field. Always shown; keeps the label floated |
endAdornment | ReactNode | — | Content rendered after the input, before the clear button |
onClear | () => void | — | Shows a clear button when the input has a value; focus returns to the input |
onRevealedChange | (revealed: boolean) => void | — | Called when the reveal toggle is clicked |
onAutofill | () => void | — | Called when the browser autofills the input |
Other native <input> attributes (or <textarea> attributes with multiline) are forwarded.
Styling
Float Input reads these component tokens. Override them at any scope to restyle it:
--field-error-color: error color (defaultvar(--color-text-danger-outline))--field-error-font-size: error font size (default0.75rem)--field-error-line-height: error line height (defaultvar(--font-text-xs-line-height))--field-error-margin-top: error margin top (default0.5rem)--floating-input-background: background (defaultvar(--color-surface))--floating-input-border-color: border color--floating-input-border-color-focus: border color focus (defaultvar(--alpha-50))--floating-input-border-color-hover: border color hover--floating-input-border-color-invalid: border color invalid (defaultvar(--color-border-danger-outline))--floating-input-border-radius: border radius (defaultvar(--radius-full))--floating-input-gutter: gutter (default1.25rem)--floating-input-height: height (default3.25rem)--floating-input-label-color: label color (defaultvar(--color-text-tertiary))--floating-input-label-color-focus: label color focus (defaultvar(--color-text))--floating-input-label-color-invalid: label color invalid (defaultvar(--color-text-danger-outline))--floating-input-label-scale: label scale (default0.88)--floating-input-transition-duration: transition duration (default80ms)