Floating Label

Forms 18

About

A text input whose label animates up into a reserved slot above the field instead of disappearing, with focus/invalid states, an optional hint line and a character counter.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Floating Label to your project and fits it to your theme.

Code

How Floating Label is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { FloatingLabelInput } from "@/components/ui/floating-label";

export default function BillingContact() {
  const [email, setEmail] = React.useState("");
  const [reference, setReference] = React.useState("");
  const [touched, setTouched] = React.useState(false);

  const bad = touched && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

  return (
    <div className="flex justify-center">
      <form className="grid w-full max-w-[320px] gap-4">
        <FloatingLabelInput
          label="Work email"
          type="email"
          autoComplete="email"
          required
          value={email}
          onChange={setEmail}
          onBlur={() => setTouched(true)}
          invalid={bad}
          hint={
            bad
              ? "Needs to look like [email protected]"
              : "Receipts are sent here."
          }
        />

        <FloatingLabelInput
          label="Invoice reference"
          value={reference}
          onChange={setReference}
          maxLength={16}
          hint="Printed on the statement header."
        />
      </form>
    </div>
  );
}