Animated Forms
Animated forms and interactive inputs to enhance UX.
Updated
How do you animate form fields without harming accessibility?
Animated forms guide people while they type: labels that float above the field, underlines that grow on focus, inputs that shake on an error and buttons that show sending and success states. They rely on CSS transitions and selectors such as :focus-visible, :placeholder-shown and :user-invalid, with JavaScript only for richer states.
How to choose, performance and accessibility
- Floating Label saves space on sign-up and contact forms, Password Strength and Shake Validation give instant feedback, and Submit Button States reassure during slow requests.
- Always keep a real
labelelement, announce errors in text rather than by motion or colour alone, and make sure no animation hides what the user typed. - Floating Label and Underline Focus are free with their full code; the other form effects come with Premium.
Floating Label
The label floats upward when the input is focused or filled.
View source code
<div class="demo-preview">
<div class="floating-label-group">
<input type="text" id="floating-input" placeholder=" " />
<label for="floating-input">Your email</label>
</div>
</div>.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
box-sizing: border-box
}
.demo-preview {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
background: rgb(26, 26, 36);
color: rgb(255, 255, 255);
font-family: sans-serif;
}
/* Variables du design system du site, dont ce code dépend (valeurs de css/style.css — à adapter librement). */
.demo-preview {
--bg-elevated: #1a1a24;
--text-muted: #8b8b93;
}
.floating-label-group {
position: relative;
width: 280px;
}
.floating-label-group input {
width: 100%;
padding: 16px 12px 8px;
font-size: 1rem;
font-family: inherit;
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: white;
outline: none;
transition: all 0.3s ease;
}
.floating-label-group label {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
pointer-events: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: transparent;
padding: 0 4px;
}
.floating-label-group input:focus,
.floating-label-group input:not(:placeholder-shown) {
border-color: #6366f1;
background: rgba(99, 102, 241, 0.05);
}
.floating-label-group input:focus+label,
.floating-label-group input:not(:placeholder-shown)+label {
top: 0;
font-size: 0.75rem;
color: #6366f1;
background: var(--bg-elevated);
}/* Pure CSS — no JavaScript required */Underline Focus
Animated line that extends from the center on focus.
View source code
<div class="demo-preview">
<div class="underline-input-group">
<input type="text" id="underline-input" placeholder=" " />
<label for="underline-input">Full name</label>
<span class="underline"></span>
</div>
</div>.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
box-sizing: border-box
}
.demo-preview {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
background: rgb(26, 26, 36);
color: rgb(255, 255, 255);
font-family: sans-serif;
}
/* Variables du design system du site, dont ce code dépend (valeurs de css/style.css — à adapter librement). */
.demo-preview {
--text-muted: #8b8b93;
}
.underline-input-group {
position: relative;
width: 280px;
}
.underline-input-group input {
width: 100%;
padding: 12px 0;
font-size: 1rem;
font-family: inherit;
background: transparent;
border: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
color: white;
outline: none;
}
.underline-input-group .underline {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, #6366f1, #d946ef);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.underline-input-group input:focus~.underline {
left: 0;
width: 100%;
}
.underline-input-group label {
position: absolute;
left: 0;
top: 12px;
color: var(--text-muted);
pointer-events: none;
transition: all 0.3s ease;
}
.underline-input-group input:focus+label,
.underline-input-group input:not(:placeholder-shown)+label {
top: -16px;
font-size: 0.75rem;
color: #6366f1;
}/* Pure CSS — no JavaScript required */Border Animation
Border that draws itself progressively around the input.
Shake Validation
The input shakes to indicate a validation error.
Success Checkmark
Animated checkmark that appears when the input is valid.
Password Strength
Animated password strength indicator.
Search Expand
Search field that expands on click.
Input with Icon
Icon that animates on input focus.
Textarea Auto-grow
Text area that auto-grows.
Submit Button States
Button with animated loading, success and error states.
Floating Label V2
Label that elegantly floats above the input with colored background.
Underline Animation
Line that extends from the center on focus.
Glow Input
Input with glow effect on focus.
Checkbox Animated
Checkbox with animated checkmark that appears progressively.
Toggle iOS Style
Toggle switch with elastic iOS-style animation.
Radio Ripple
Radio buttons with ripple effect on selection.
Password Strength V2
Compact strength indicator with colored bar.
Select Animated
Dropdown with animated arrow on focus.
Character Counter
Textarea with built-in character counter.
Search Expand V2
Compact search field that expands on focus.
Pricing Toggle Odometer
Monthly/annual toggle where the price scrolls digit by digit (odometer effect) with an animated savings badge. Perfect for pushing annual subscriptions.
💡 Perfect for: pricing page, SaaS, plan comparison, annual upsell, Black Friday.