Floating Label Input
Input fields where the label floats above on focus or when the field has content.
Adjust the preview
Every choice updates the preview and the wording below.
Style
Color
Label Text
Your prompt
Highlighted values follow your choices — click one to write your own.
Create a floating label input field in outlined style with violet accent color and email address as the placeholder label. When focused or non-empty, the label should smoothly translate upward and scale down using CSS transitions. Show multiple input states: empty, filled, and focused.
Paste it into Claude, Cursor, or v0 along with the context for your project.