Forms

Floating Label Input

Server Component

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

Import

tsx

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

bash

npx cronus-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@cronus.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."
/>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component FloatingLabelInputDefault layout:inline style:floating-label-input {
  value:"ada@cronus.dev"
  label "Email"
}

page "/audit/floating-label-input/default" type:custom {
  use FloatingLabelInputDefault
}

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>`.
`value`	`string`	—	Controlled value.
`defaultValue`	`string`	—	Uncontrolled initial value.
`onChange`	`(event: ChangeEvent<HTMLInputElement>) => void`	—	Called when the value changes.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`name`	`string`	—	Submitted name when used in a form.
`required`	`boolean`	—	Marks the control as required.
`className`	`string`	—	Additional class names merged onto the root.