The filled field with a label that lives inside it, then floats up and shrinks the moment you focus or type. Dense forms stay scannable because label and value share one visual slot.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build Material Design 3 filled fields with floating labels.
1. Container: filled background #0F172A0F, radius 8px on top corners only, height 56px, a 1px bottom border in #64748B.
2. Label: starts as 16px placeholder-position text centered vertically; on focus or when filled it floats to the top-left and shrinks to 12px, transitioning 150ms ease-out.
3. Focus: bottom border thickens to 2px in the primary color #4F46E5; the floated label takes the same color.
4. Text: 16px #0F172A, padding 24px top / 8px bottom so the floated label has room.
5. Error: bottom border and label switch to #B3261E, supporting text below at 12px.
6. The float animation is the signature — it must be smooth, never instant.The filled field with a label that lives inside it, then floats up and shrinks the moment you focus or type. Dense forms stay scannable because label and value share one visual slot.
Click into the fields and type — focus rings, label motion and error states are live.
Click into the fields and type — focus rings, label motion and error states are live.