Fluxo UIFluxo UIv0.4.93

Floating Label Input

A Material-style text field whose label floats above the input on focus — saves a row of vertical space on mobile forms.

Basic Usage

Default outlined input

The label floats above the field on focus or when it has a value — saves a full row of label height on mobile screens.

We'll never share your email.
import { FloatingLabelInput } from 'fluxo-ui';

<FloatingLabelInput
    label="Email address"
    type="email"
    value={email}
    onChange={(e) => setEmail(e.target.value)}
    helperText="We'll never share your email."
/>

Variants

Outlined (default)

Borders on all four sides with the floating label cutting through the top border.

Filled

A subtle background fills the field, with only the bottom border visible — a denser, Android-style look.

Underlined

Only the bottom border — works well on transparent surfaces.

<FloatingLabelInput label="Outlined" variant="outlined" />
<FloatingLabelInput label="Filled" variant="filled" />
<FloatingLabelInput label="Underlined" variant="underlined" />

Sizes

Three sizes

Pair size to surrounding form density. Large is recommended for mobile-first forms.

<FloatingLabelInput label="Small"  size="sm" />
<FloatingLabelInput label="Medium" size="md" />
<FloatingLabelInput label="Large"  size="lg" />

States

Leading & trailing icons

Add icons inside the field — labels auto-shift to make room.

Error state

Pass errorText to highlight the field, render the message, and announce it via role=alert.

Disabled

Read-only fields fade out the wrapper but keep the label and value visible.

<FloatingLabelInput label="Search" leadingIcon={<SearchIcon />} fullWidth />
<FloatingLabelInput label="Email" type="email" required fullWidth />
<FloatingLabelInput label="Password" type="password" trailingIcon={<EyeIcon />} fullWidth />
<FloatingLabelInput label="Username" errorText="That handle is taken" fullWidth />
<FloatingLabelInput label="Read-only" defaultValue="alice@example.com" disabled fullWidth />

Import

import { FloatingLabelInput } from 'fluxo-ui';
import type { FloatingLabelInputProps, FloatingLabelVariant, FloatingLabelSize } from 'fluxo-ui';

Props

labelreq
string

Floating label text shown above the input when focused or filled.

value
string | number

Controlled value.

defaultValue
string | number

Initial value for uncontrolled usage.

onChange
(event: ChangeEvent<HTMLInputElement>) => void

Change handler.

helperText
ReactNode

Helper line shown below the input.

errorText
ReactNode

Error message shown in place of the helper when set. Triggers error styling.

variant
'outlined' | 'filled' | 'underlined'"'outlined'"

Visual style. 'filled' uses a subtle background; 'underlined' shows only the bottom rule.

size
'sm' | 'md' | 'lg'"'md'"

Field size.

fullWidth
boolean"false"

Stretch to fill its container.

leadingIcon
ReactNode

Icon shown before the input field.

trailingIcon
ReactNode

Icon shown after the input field.

invalid
boolean"false"

Force error styling without an error message.

rootClassName
string

Additional CSS class for the wrapper element.

className
string

Additional CSS class for the underlying <input>.

Features

Three variants

Outlined, filled, and underlined to match any form style.

Auto floating label

Label animates above on focus or when the field has a value.

Helper & error text

Built-in supporting line that switches to alert styling on error.

Leading & trailing icons

Drop in any icon; label position adapts automatically.

Native input props

All standard <input> props (type, autoComplete, inputMode, etc.) pass through.

Full ARIA wiring

aria-invalid, aria-describedby, and role=alert announcement on errors.