Form Input Variants and Validation in Framer
We’ve looked at how to add a simple focus effect for an input on the properties — but that’s just scratching the surface. Let’s take a look at how we can take input states and validation to the next level using components.
We’ll have an input with a placeholder as the default state…
Then when we click, we’ll enter a focused state — and the label will move up above the input….
Then after we type something and click away, we want to have a defocus, or “blur” state, where the styling is like the default state — but the label remains up and above the input….
Then finally, we want an invalid state in case what’s typed in the input is not a valid email address — But also to re-validate the text once it’s fixed.
Let’s build it.
00:00 Intro
00:05 What we’re building: input states and validation
00:16 Setting up the form and default state styling
00:27 Adjusting layout and label positioning
00:46 Creating the focus variant
01:02 Adding blur and invalid variants
01:18 Styling borders for smooth animations
01:34 Adding focus interactions
01:49 Why we need a blur state
02:20 Handling empty vs filled blur logic
02:50 Adding validation for invalid input
03:25 Fixing the invalid state with revalidation
04:18 Wrap up
🌞 Start for free: https://framer.link/yt
📚 Learn more at: https://framer.link/yt-academy
💎 Join the Community: https://framer.link/yt-community
🎉 Follow on X: https://framer.link/yt-x