16 Tailwind CSS Floating Label Inputs
09 / 16

All 16 in 16 Tailwind CSS Floating Label Inputs

  1. 01Tailwind Staggered Letter-Cascade Floating Label
  2. 02Tailwind Gradient-Ink Floating Label with Animated Underline Draw
  3. 03Tailwind Conic Border-Beam Floating Label (@property Animation)
  4. 04Pure Tailwind Floating Label Input (No JavaScript)
  5. 05Tailwind Floating Label with Chrome Autofill Fix
  6. 06Tailwind Floating Label Validation States (Error + Success)
  7. 07Accessible Tailwind Floating Label Input (ARIA + WCAG)
  8. 08Tailwind Floating Label for Select Dropdowns
  9. 09Tailwind Material Design Outlined Text Field
  10. 10Tailwind Filled & Underline Floating Label Input
  11. 11Tailwind Dark Mode Floating Label Input with light-dark()
  12. 12Tailwind Input with Icon Inside and Floating Label
  13. 13Responsive Tailwind Floating Label for Mobile (No iOS Zoom)
  14. 14Tailwind Auto-Growing Textarea with Floating Label
  15. 15Tailwind Password Input with Show/Hide Toggle and Floating Label
  16. 16Tailwind Multi-Column Form Grid with Floating Labels
Pure TailwindMIT licensed

Tailwind Material Design Outlined Text Field

The Google-style outlined field: on focus the label glides up onto the border and the outline 'opens' a notch around it. The notch is the label's own bg-white px-[5px] erasing the border behind it — no fieldset, no legend, no JS measuring. Focus thickens the edge with focus:shadow-[inset_0_0_0_1px_…], so the text never shifts.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="tfl-09 w-full min-h-svh grid place-items-center bg-tfl09-bg px-5 py-12 font-tfl09-sans" aria-label="Outlined material floating label demo">
  <form class="flex w-full max-w-[400px] flex-col gap-[22px] rounded-3xl bg-white p-8 shadow-[0_24px_60px_-32px_oklch(0.3_0.08_290/0.4)] ring-1 ring-tfl09-ink/5" novalidate>
    <div class="flex items-baseline justify-between gap-3">
      <h3 class="text-2xl font-extrabold tracking-[-0.02em] text-tfl09-ink">Payment details</h3>
      <span class="flex items-center gap-1.5 text-xs font-semibold text-tfl09-mut"><svg aria-hidden="true" viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><rect x="3" y="7" width="10" height="7" rx="1.5"></rect><path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2"></path></svg>Encrypted</span>
    </div>
    <div class="relative">
      <input class="peer h-14 w-full rounded-xl border-[1.5px] border-tfl09-line bg-transparent px-4 text-base tracking-[.06em] text-tfl09-ink tabular-nums outline-hidden transition-[border-color,box-shadow] duration-200 hover:border-tfl09-line-hover focus:border-tfl09-acc focus:shadow-[inset_0_0_0_1px_var(--color-tfl09-acc)] motion-reduce:transition-none" type="text" id="tfl-09-card" name="cc-number" placeholder=" " inputmode="numeric" autocomplete="cc-number" maxlength="23">
      <label class="pointer-events-none absolute left-3 top-1/2 origin-left -translate-y-1/2 bg-white px-[5px] text-base text-tfl09-mut transition-[translate,scale,color] duration-[180ms] peer-focus:translate-y-[calc(-50%_-_28px)] peer-focus:scale-76 peer-focus:font-semibold peer-focus:text-tfl09-acc peer-[:not(:placeholder-shown)]:translate-y-[calc(-50%_-_28px)] peer-[:not(:placeholder-shown)]:scale-76 motion-reduce:transition-none" for="tfl-09-card">Card number</label>
    </div>
    <div class="grid grid-cols-2 gap-4">
      <div class="relative">
        <input class="peer h-14 w-full rounded-xl border-[1.5px] border-tfl09-line bg-transparent px-4 text-base text-tfl09-ink tabular-nums outline-hidden transition-[border-color,box-shadow] duration-200 hover:border-tfl09-line-hover focus:border-tfl09-acc focus:shadow-[inset_0_0_0_1px_var(--color-tfl09-acc)] motion-reduce:transition-none" type="text" id="tfl-09-exp" name="cc-exp" placeholder=" " inputmode="numeric" autocomplete="cc-exp" maxlength="7">
        <label class="pointer-events-none absolute left-3 top-1/2 origin-left -translate-y-1/2 bg-white px-[5px] text-base text-tfl09-mut transition-[translate,scale,color] duration-[180ms] peer-focus:translate-y-[calc(-50%_-_28px)] peer-focus:scale-76 peer-focus:font-semibold peer-focus:text-tfl09-acc peer-[:not(:placeholder-shown)]:translate-y-[calc(-50%_-_28px)] peer-[:not(:placeholder-shown)]:scale-76 motion-reduce:transition-none" for="tfl-09-exp">MM / YY</label>
      </div>
      <div class="relative">
        <input class="peer h-14 w-full rounded-xl border-[1.5px] border-tfl09-line bg-transparent px-4 text-base text-tfl09-ink tabular-nums outline-hidden transition-[border-color,box-shadow] duration-200 hover:border-tfl09-line-hover focus:border-tfl09-acc focus:shadow-[inset_0_0_0_1px_var(--color-tfl09-acc)] motion-reduce:transition-none" type="text" id="tfl-09-cvc" name="cc-csc" placeholder=" " inputmode="numeric" autocomplete="cc-csc" maxlength="4">
        <label class="pointer-events-none absolute left-3 top-1/2 origin-left -translate-y-1/2 bg-white px-[5px] text-base text-tfl09-mut transition-[translate,scale,color] duration-[180ms] peer-focus:translate-y-[calc(-50%_-_28px)] peer-focus:scale-76 peer-focus:font-semibold peer-focus:text-tfl09-acc peer-[:not(:placeholder-shown)]:translate-y-[calc(-50%_-_28px)] peer-[:not(:placeholder-shown)]:scale-76 motion-reduce:transition-none" for="tfl-09-cvc">CVC</label>
      </div>
    </div>
    <button class="min-h-[52px] cursor-pointer rounded-xl bg-tfl09-acc text-[15px] font-bold text-white shadow-[0_10px_24px_-12px_var(--color-tfl09-acc)] transition-[filter,scale] duration-150 hover:brightness-115 active:scale-[.985] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-tfl09-acc/50" type="button">Pay $48.00</button>
  </form>
</section>
@import "tailwindcss";

@theme {
  --color-tfl09-bg: #ebe9f2;
  --color-tfl09-bg: oklch(0.94 0.01 290);
  --color-tfl09-ink: #1f1b2e;
  --color-tfl09-ink: oklch(0.22 0.03 290);
  --color-tfl09-mut: #635c79;
  --color-tfl09-mut: oklch(0.49 0.04 290);
  --color-tfl09-line: #c9c4da;
  --color-tfl09-line: oklch(0.83 0.025 290);
  --color-tfl09-line-hover: #a29bbc;
  --color-tfl09-line-hover: oklch(0.7 0.04 290);
  --color-tfl09-acc: #5a3fc0;
  --color-tfl09-acc: oklch(0.48 0.19 288);
  --font-tfl09-sans: 'Figtree', system-ui, sans-serif;
}

.tfl-09 {
  width: 100%;
  min-height: 100svh;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tfl09-bg: #ebe9f2;
  --color-tfl09-bg: oklch(0.94 0.01 290);
  --color-tfl09-ink: #1f1b2e;
  --color-tfl09-ink: oklch(0.22 0.03 290);
  --color-tfl09-mut: #635c79;
  --color-tfl09-mut: oklch(0.49 0.04 290);
  --color-tfl09-line: #c9c4da;
  --color-tfl09-line: oklch(0.83 0.025 290);
  --color-tfl09-line-hover: #a29bbc;
  --color-tfl09-line-hover: oklch(0.7 0.04 290);
  --color-tfl09-acc: #5a3fc0;
  --color-tfl09-acc: oklch(0.48 0.19 288);
  --font-tfl09-sans: 'Figtree', system-ui, sans-serif;
}

.tfl-09 {
  width: 100%;
  min-height: 100svh;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Figtree:wght@400..800&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • --surface became plain bg-white on both card and label — the dependency is now visible side by side in the markup.
  • The row's grid-template-columns:1fr 1fr became grid grid-cols-2 gap-4.
  • UI upgrade — bug fix: the original's hover colour #a29bc was a five-digit hex, which browsers reject, so hover did nothing; it is now a valid --color-tfl09-line-hover token.
  • UI upgrade: card fields use tabular-nums with light tracking and sensible maxlengths, the header gained an 'Encrypted' trust cue, and the resting label rose from #756e8c (4.6:1) to 6.3:1.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Material Design Outlined Text Field
Source: https://codefronts.com/components/tailwind-css-floating-label-inputs/tailwind-material-design-outlined-text-field/

The Google-style outlined field: on focus the label glides up onto the border and the outline 'opens' a notch around it. The notch is the label's own bg-white px-[5px] erasing the border behind it — no fieldset, no legend, no JS measuring. Focus thickens the edge with focus:shadow-[inset_0_0_0_1px_…], so the text never shifts.
## HTML
```html
<section class="tfl-09 w-full min-h-svh grid place-items-center bg-tfl09-bg px-5 py-12 font-tfl09-sans" aria-label="Outlined material floating label demo">
  <form class="flex w-full max-w-[400px] flex-col gap-[22px] rounded-3xl bg-white p-8 shadow-[0_24px_60px_-32px_oklch(0.3_0.08_290/0.4)] ring-1 ring-tfl09-ink/5" novalidate>
    <div class="flex items-baseline justify-between gap-3">
      <h3 class="text-2xl font-extrabold tracking-[-0.02em] text-tfl09-ink">Payment details</h3>
      <span class="flex items-center gap-1.5 text-xs font-semibold text-tfl09-mut"><svg aria-hidden="true" viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><rect x="3" y="7" width="10" height="7" rx="1.5"></rect><path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2"></path></svg>Encrypted</span>
    </div>
    <div class="relative">
      <input class="peer h-14 w-full rounded-xl border-[1.5px] border-tfl09-line bg-transparent px-4 text-base tracking-[.06em] text-tfl09-ink tabular-nums outline-hidden transition-[border-color,box-shadow] duration-200 hover:border-tfl09-line-hover focus:border-tfl09-acc focus:shadow-[inset_0_0_0_1px_var(--color-tfl09-acc)] motion-reduce:transition-none" type="text" id="tfl-09-card" name="cc-number" placeholder=" " inputmode="numeric" autocomplete="cc-number" maxlength="23">
      <label class="pointer-events-none absolute left-3 top-1/2 origin-left -translate-y-1/2 bg-white px-[5px] text-base text-tfl09-mut transition-[translate,scale,color] duration-[180ms] peer-focus:translate-y-[calc(-50%_-_28px)] peer-focus:scale-76 peer-focus:font-semibold peer-focus:text-tfl09-acc peer-[:not(:placeholder-shown)]:translate-y-[calc(-50%_-_28px)] peer-[:not(:placeholder-shown)]:scale-76 motion-reduce:transition-none" for="tfl-09-card">Card number</label>
    </div>
    <div class="grid grid-cols-2 gap-4">
      <div class="relative">
        <input class="peer h-14 w-full rounded-xl border-[1.5px] border-tfl09-line bg-transparent px-4 text-base text-tfl09-ink tabular-nums outline-hidden transition-[border-color,box-shadow] duration-200 hover:border-tfl09-line-hover focus:border-tfl09-acc focus:shadow-[inset_0_0_0_1px_var(--color-tfl09-acc)] motion-reduce:transition-none" type="text" id="tfl-09-exp" name="cc-exp" placeholder=" " inputmode="numeric" autocomplete="cc-exp" maxlength="7">
        <label class="pointer-events-none absolute left-3 top-1/2 origin-left -translate-y-1/2 bg-white px-[5px] text-base text-tfl09-mut transition-[translate,scale,color] duration-[180ms] peer-focus:translate-y-[calc(-50%_-_28px)] peer-focus:scale-76 peer-focus:font-semibold peer-focus:text-tfl09-acc peer-[:not(:placeholder-shown)]:translate-y-[calc(-50%_-_28px)] peer-[:not(:placeholder-shown)]:scale-76 motion-reduce:transition-none" for="tfl-09-exp">MM / YY</label>
      </div>
      <div class="relative">
        <input class="peer h-14 w-full rounded-xl border-[1.5px] border-tfl09-line bg-transparent px-4 text-base text-tfl09-ink tabular-nums outline-hidden transition-[border-color,box-shadow] duration-200 hover:border-tfl09-line-hover focus:border-tfl09-acc focus:shadow-[inset_0_0_0_1px_var(--color-tfl09-acc)] motion-reduce:transition-none" type="text" id="tfl-09-cvc" name="cc-csc" placeholder=" " inputmode="numeric" autocomplete="cc-csc" maxlength="4">
        <label class="pointer-events-none absolute left-3 top-1/2 origin-left -translate-y-1/2 bg-white px-[5px] text-base text-tfl09-mut transition-[translate,scale,color] duration-[180ms] peer-focus:translate-y-[calc(-50%_-_28px)] peer-focus:scale-76 peer-focus:font-semibold peer-focus:text-tfl09-acc peer-[:not(:placeholder-shown)]:translate-y-[calc(-50%_-_28px)] peer-[:not(:placeholder-shown)]:scale-76 motion-reduce:transition-none" for="tfl-09-cvc">CVC</label>
      </div>
    </div>
    <button class="min-h-[52px] cursor-pointer rounded-xl bg-tfl09-acc text-[15px] font-bold text-white shadow-[0_10px_24px_-12px_var(--color-tfl09-acc)] transition-[filter,scale] duration-150 hover:brightness-115 active:scale-[.985] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-tfl09-acc/50" type="button">Pay $48.00</button>
  </form>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tfl09-bg: #ebe9f2;
  --color-tfl09-bg: oklch(0.94 0.01 290);
  --color-tfl09-ink: #1f1b2e;
  --color-tfl09-ink: oklch(0.22 0.03 290);
  --color-tfl09-mut: #635c79;
  --color-tfl09-mut: oklch(0.49 0.04 290);
  --color-tfl09-line: #c9c4da;
  --color-tfl09-line: oklch(0.83 0.025 290);
  --color-tfl09-line-hover: #a29bbc;
  --color-tfl09-line-hover: oklch(0.7 0.04 290);
  --color-tfl09-acc: #5a3fc0;
  --color-tfl09-acc: oklch(0.48 0.19 288);
  --font-tfl09-sans: 'Figtree', system-ui, sans-serif;
}

.tfl-09 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

The notch is a background, not a cut. The floated label paints the card's colour behind its text and pads it sideways, so the border line under it disappears — at any radius, for any label length.

<label class="absolute left-3 top-1/2 -translate-y-1/2 bg-white px-[5px]
  peer-focus:translate-y-[calc(-50%_-_28px)] peer-focus:scale-76 …">

Why shadow, not border-width. Going from 1.5px to 2.5px border moves the text 1px; an inset shadow thickens the edge visually with no box change.

Make it yours

  • The label background must match the surface — change bg-white on card and label together.
  • Notch padding: px-[5px].
  • Any radius works — try rounded-full on single-line fields.
  • Focus edge: the inset shadow's spread (1px).

Gotchas — read before shipping

  • On gradient or image surfaces the flat label background gives the trick away — use a solid chip instead.
  • Keep the floated label ≥12px computed (16 × 0.76 = 12.2px).
  • inputmode="numeric" + autocomplete="cc-*" matter more than any styling on payment fields.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Border + background + transform — the notch itself is decade-old CSS.

Techniques used in this demo

Utilitiesfirst-class utility or variant

box-shadowtw ↗gridtw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →