Floating Label Input

AnimationsLive Preview

Input fields where the label floats above on focus or when the field has content.

Customize Preview

Select options to update the live preview, or edit the prompt directly below.

Style

Color

Label Text

Your Prompt

abcclick to edit

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.