Forms

Floating Label Input

Text field whose label floats above on focus or when filled.

Import

tsx

import { FloatingLabelInput } from "@cooud-ui/ui";

bash

npx cooud-ui add floating-label-input

Examples

Default

The label starts in the placeholder position and floats up to a compact caption on focus or when the field is filled. The float is pure CSS (`peer-*` variants) — no state, no re-render while typing.

Email address

We'll never share your email.

tsx

<FloatingLabelInput
  label="Email address"
  type="email"
  helperText="We'll never share your email."
/>

With adornments

Pin decorative icons with `startAdornment` / `endAdornment`; the label and input inset to make room. A prefilled field shows the floated resting state.

Email address

Password

tsx

<div className="flex flex-col gap-4">
  <FloatingLabelInput
    label="Email address"
    type="email"
    defaultValue="ada@cooud.dev"
    startAdornment={<Mail />}
  />
  <FloatingLabelInput label="Password" type="password" startAdornment={<Lock />} />
</div>

Invalid

`invalid` turns the border, label, and helper to the error color and announces the helper via `role="alert"`.

Password

Use at least 8 characters.

tsx

<FloatingLabelInput
  label="Password"
  type="password"
  defaultValue="123"
  invalid
  startAdornment={<Lock />}
  helperText="Use at least 8 characters."
/>

API Reference

Generated from the component's exported types.

FloatingLabelInputProps

Extends Omit<InputHTMLAttributes<HTMLInputElement>, "placeholder">

Prop	Type	Default	Description
`label`*	`ReactNode`	—	The label text. Sits in the placeholder position, then floats up when the field is focused or filled.
`helperText`	`ReactNode`	—	Optional caption rendered under the field and linked to the input via `aria-describedby`. Turns into an error message when `invalid`.
`invalid`	`boolean`	`false`	Marks the field invalid — drives the error border/ring, error label color, and an announced (`role="alert"`) helper.
`startAdornment`	`ReactNode`	—	Decorative content (usually an icon) pinned to the left; the label and input inset to make room.
`endAdornment`	`ReactNode`	—	Content (icon or button) pinned to the right; the input insets to make room.
`labelClassName`	`string`	—	Extra classes for the floating `<label>`.