Floating label
Also called float label or floating placeholder
A form field whose label sits inside the input like a placeholder, then shrinks and moves to the top edge when you focus or type.
import { Field } from '@base-ui/react/field';
type Props = {
name: string;
label: string;
type?: string;
autoComplete?: string;
};
export function FloatingLabelInput({
name,
label,
type = 'text',
autoComplete
}: Props) {
return (
<Field.Root name={name} className='relative w-72'>
<Field.Control
type={type}
autoComplete={autoComplete}
className='h-14 w-full rounded-lg border bg-background px-3 pt-5 pb-1.5 text-base outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20'
/>
{/* Field marks the label data-focused and data-filled, so it floats up and
shrinks on focus and stays there once the field has a value. */}
<Field.Label className='pointer-events-none absolute top-4 left-3 origin-top-left text-base text-muted-foreground transition-[translate,scale,color] duration-150 ease-out data-filled:-translate-y-2.5 data-filled:scale-75 data-focused:-translate-y-2.5 data-focused:scale-75 data-focused:text-blue-600'>
{label}
</Field.Label>
</Field.Root>
);
}
// <FloatingLabelInput name='email' label='Email' type='email' autoComplete='email' />Use floating labels in the checkout form: each input is 56px tall with its label centered inside at 16px. On focus or when the field has a value, move the label up near the top edge and scale it to 75% over 150ms with an ease-out curve, and color it blue while focused. Build it in CSS with :focus and :not(:placeholder-shown) and a real <label> element.
Paste into Layerwise or any AI coding tool.
What is Floating label?
A floating label starts inside the empty field, where a placeholder would be. When the field gets focus or has a value, the label scales down and slides up to the top edge, so it stays visible while you type. The pattern spread widely after Google’s Material Design adopted it.
It saves vertical space in compact forms such as sign-in, checkout, and mobile screens while keeping a real label on screen. A plain placeholder disappears as soon as someone starts typing, so they can lose track of what the field was for; a floating label stays put.
Keep the floated label large enough to read, at least 12px, and animate it with transform over about 150 to 200ms. Use a real <label> tied to the input. In CSS, :focus and :placeholder-shown cover both states without JavaScript, as long as the input has a placeholder of a single space.
Related terms
All termsInline validation
Form checking that happens right next to each field as you fill it in, showing an error or a checkmark before you press Submit.
Focus ring
An outline that marks which element has keyboard focus, so people moving through a page with the Tab key can see where they are.
Transform origin
The point an element rotates and scales around. It defaults to the center, and moving it changes where a transform seems to start.
Interaction states
The set of looks a control takes as people use it, such as default, hover, pressed, focused, and disabled, each showing what will happen.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.