Inputs — Labels inside tall fields

Two tall fields keep their labels inside the border and raise them when focused or filled. Use when compact forms need persistent field names.

ReactHTML

1440 × 480

Open in new tab

Component.tsx10 lines

export default function InputsFloatingLabels() {
  return (
    <div className="grid w-72 gap-4 text-neutral-900 sm:w-96"><div className="relative"><input className="peer h-14 w-full rounded-md border border-neutral-300 bg-white px-3 pb-2 pt-6 text-sm text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" id="inputs-floating-labels-name" name="name" type="text" placeholder=" " aria-describedby="inputs-floating-labels-name-hint" />
    <label className="absolute left-3 top-1.5 cursor-text text-xs font-medium text-neutral-600 peer-placeholder-shown:top-4 peer-placeholder-shown:text-sm peer-focus:top-1.5 peer-focus:text-xs" htmlFor="inputs-floating-labels-name">Display name</label>
    <p className="mt-1.5 text-xs text-neutral-500" id="inputs-floating-labels-name-hint">Use the name people should see.</p></div>
    <div className="relative"><input className="peer h-14 w-full rounded-md border border-neutral-300 bg-white px-3 pb-2 pt-6 text-sm text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" id="inputs-floating-labels-email" name="email" type="email" placeholder=" " aria-describedby="inputs-floating-labels-email-hint" />
    <label className="absolute left-3 top-1.5 cursor-text text-xs font-medium text-neutral-600 peer-placeholder-shown:top-4 peer-placeholder-shown:text-sm peer-focus:top-1.5 peer-focus:text-xs" htmlFor="inputs-floating-labels-email">Email address</label>
    <p className="mt-1.5 text-xs text-neutral-500" id="inputs-floating-labels-email-hint">Use a contact email address.</p></div></div>
  )
}

Pattern notes

When to use: Use for short forms with persistent labels inside the field. Choose external labels for long field names or complex errors. Variations: add a phone field, prefill a value, or replace the name with a short reference code.
Hierarchy: Read each field name inside its boundary, then its hint. Labels use at most 2 words and hints under 9 words. The label remains visible after typing; aria-describedby connects each hint to its input.
Responsive: The root grows from 288px to 384px at 640px. Fields remain full width in one column; label positions and 56px heights do not change.
Layout: A 288px (w-72) stack grows to 384px at sm with 16px gaps. Each relative field contains a 56px input with 12px horizontal padding, 24px top padding and 8px bottom padding. The absolute label sits 12px from the left; a hint follows by 6px.
States: An empty unfocused field shows a 14px label at top-4. Focus or entered text moves it to top-1.5 at 12px. The field draws a 2px outline offset 2px on keyboard focus. There are no error or disabled examples.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────┐     │
│ │ [Display name]                               │     │
│ └──────────────────────────────────────────────┘     │
│ Use the name people should see.                      │
│ ┌──────────────────────────────────────────────┐     │
│ │ [Email address]                              │     │
│ └──────────────────────────────────────────────┘     │
│ Use a contact email address.                         │
└──────────────────────────────────────────────────────┘

View all

Inputs — Date range with a shared note
Layout tags: split,form,compact
Inputs — Dimensions with proportions and units
Layout tags: split,form,numbers,compact
Inputs — Field grid with mixed widths
Layout tags: grid,form,compact

Inputs — Labels inside tall fields

Pattern notes

More in Inputs

Inputs — Date range with a shared note

Inputs — Dimensions with proportions and units

Inputs — Field grid with mixed widths