Floating Label Input

CSS-only floating label field

Formsforminputlabelcssautofill

Email address

Code locked

export function FloatingLabelInput() {
  return (
    <div className="relative w-full max-w-xs">
      <input
        id="email"
        placeholder=" "
        className="peer w-full rounded-lg border border-neutral-200 px-3 pb-2 pt-5 text-sm outline-none transition-colors focus:border-amber-500"
      />

Create a free account to copy the full source, usage snippet and AI prompt of every component.

Create free account Sign in

Free — no card required.

Related components

⌘K

Search Input

Forms · Search with a clear button and a ⌘K hint

designnextjs

Tag Input

Forms · Keyboard-driven tag field

Toggle Switch

Forms · Switch with proper accessibility roles