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/vue/components/FloatingLabelInput";Examples
Overview
Filled state
Textarea
multiline
With error message
With description
With description and error
Clear button
Disabled
Read only
All states
Password input
SSN input
Birthday input
Birthday with validation
Birthday states
Select
Multiple selection
Country select
Phone input
API
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label text for the floating label |
value / v-model:value | string | — | Controlled value; `update:value` fires on input |
default-value | string | — | Initial value when uncontrolled |
error-message | string | — | Error message to display below the input |
invalid | boolean | false (true if error-message) | Mark the input as invalid |
description | string | slot | — | Helper text below the input |
disabled | boolean | false | Disables the input |
read-only / readonly | boolean | false | Makes the input read-only (both spellings work) |
type | string | "text" | Input type; password gets a reveal toggle |
revealable | boolean | true for password without an end adornment | Built-in reveal toggle |
multiline | boolean | false | Render an auto-growing textarea |
rows | number | 2 | Visible lines when multiline |
allow-autofill-extensions | boolean | false | Let password-manager extensions decorate the input |
#startAdornment / #endAdornment | slots | — | Content before or after the input (camelCase slot names). A start adornment is always shown and keeps the label floated |
@clear | () => void | — | Shows the clear button and fires when it is clicked; focus returns to the input |
@revealed-change | (revealed: boolean) => void | — | Fires when the reveal toggle is clicked |
@autofill | () => void | — | Fires when the browser autofills the input |
Other attributes and listeners are forwarded to the <input> (or to the <textarea> with multiline).
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)