Forms

Form Input Variants and Validation in Framer

Joseph

7:52

18K views

Aug 20, 2024

About this lesson

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.

https://www.youtube.com/watch?v=qN9giCMK6Zo&t=0s Intro

https://www.youtube.com/watch?v=qN9giCMK6Zo&t=5s What we’re building: input states and validation

https://www.youtube.com/watch?v=qN9giCMK6Zo&t=16s Setting up the form and default state styling

https://www.youtube.com/watch?v=qN9giCMK6Zo&t=27s Adjusting layout and label positioning

https://www.youtube.com/watch?v=qN9giCMK6Zo&t=46s Creating the focus variant

https://www.youtube.com/watch?v=qN9giCMK6Zo&t=62s Adding blur and invalid variants

https://www.youtube.com/watch?v=qN9giCMK6Zo&t=78s Styling borders for smooth animations

https://www.youtube.com/watch?v=qN9giCMK6Zo&t=94s Adding focus interactions

https://www.youtube.com/watch?v=qN9giCMK6Zo&t=109s Why we need a blur state

https://www.youtube.com/watch?v=qN9giCMK6Zo&t=140s Handling empty vs filled blur logic

https://www.youtube.com/watch?v=qN9giCMK6Zo&t=170s Adding validation for invalid input

https://www.youtube.com/watch?v=qN9giCMK6Zo&t=205s Fixing the invalid state with revalidation

https://www.youtube.com/watch?v=qN9giCMK6Zo&t=258s 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

0:00we've looked at how to add a simple 0:01Focus effect for an input on the 0:03properties panel but that's just 0:05scratching the surface let's take a look 0:07at how we can take input States and 0:09validation to the next level using 0:13[Music]0:15components in my project I've got a 0:17simple form here with a text input for 0:19an email address and a submit button but 0:22let's take a quick look at what we're 0:23trying to accomplish here we want to end 0:25up with an input with a placeholder as 0:28the default state then when we click 0:30we'll enter a focus State and the label 0:32will move up above the input then after 0:35we type something and click away we want 0:38to have a defocus or blur state where 0:40the styling is like the default state 0:43but the label remains up above the input 0:46then finally we want an invalid state in 0:48case what's typed in the input is not a 0:51valid email address but also to 0:53revalidate the text once it's fixed 0:56let's build it back in the project I'll 0:58start by selecting the entire label 1:01frame right clicking and choosing create 1:05component I'm going to start by making a 1:07few changes to the primary variant 1:09before we create the others let's start 1:12by giving it a more descriptive name 1:13like 1:15default now I'm going to change the 1:17height of this Frame to fixed to 1:20preserve this extra space up here when 1:22we move the label 1:23around then I'll set the email label to 1:26Absolute positioning so we can move it 1:28around freely you'll notice the input 1:30jumped up to the top that's because the 1:32parent frame is a vertical stack and the 1:34input's position type is relative 1:37meaning it follows the flow of the stack 1:39that it's in we could set the input to 1:42Absolute positioning or have it align 1:44with the bottom of the stack it's in by 1:46changing the stack to distribute from 1:48end rather than start which for a 1:50vertical stack means from bottom rather 1:53than top that's better next I'm going to 1:56delete the placeholder text for the 1:57input 1:59and instead move the label text box down 2:02onto the input to behave as our 2:04placeholder that way we can animate the 2:06label moving back and forth I'll 2:09increase the font size slightly to 2:1114 and make sure the text box is inset 2:14evenly on the top bottom and left 2:17another thing worth noting is that my 2:19input field has no Focus effect we're 2:21going to create a variant for the focus 2:23State instead and I think we're all good 2:26for our primary variant I'll click to 2:28add our second variant and rename this 2:31one 2:32Focus now in the focus State the user 2:35will have just clicked or tapped into 2:37the field to type something so we'll 2:39need to move the placeholder text back 2:41up and out of the 2:42way and I'll bring the size back down to 2:4512 pixels while we're at 2:46it before I continue on with styling 2:49let's actually pause here for a moment 2:50the layout of this Focus state is 2:53actually exactly the same as the layout 2:54I want for our blur and invalid States 2:57so while we're here we might as well 2:59create create a couple more 3:01variants and name one of them 3:04blur and the other one 3:07invalid now we can style each one since 3:10a couple of variants are going to have 3:11borders around the inputs we can make 3:13our animations extra Smooth by making 3:16sure that every variant has a border 3:19that way the property itself isn't 3:20snapping on and off so I'll select the 3:23input of the primary variant add a 3:27border increase the width to two 3:30pixels and for the color I'll drag the 3:33alpha all the way down to 3:350% now for the focus state I'm just 3:38going to select the 3:39input select the Border 3:42property and change the color to 3:45Blue and similarly for the invalid State 3:48I'll select the input select border 3:50property and make it 3:53red and I'll go one step further with 3:55this one and select the text and make 3:58that red as well to help grab the users 4:00attention great now we have our four 4:02states we just need to add the 4:04interactions which we can do on the 4:06primary variant and the interactions 4:08will be inherited by the other variants 4:11I'll start by selecting the input field 4:13then drag the interaction handle to the 4:15focus variant now because this 4:18interaction is triggered by an input 4:20field we get some input specific options 4:22here for when to trigger the interaction 4:25in this case we're linking to our Focus 4:27variant so naturally we'll trigger this 4:29on Focus I'll leave the value set to any 4:33which means we'll go to the focus 4:34variant whether the user has typed into 4:36the field or not let's repeat this for 4:38the blur State select the input drag 4:41over to our blur variant and we'll 4:44choose to trigger on blur you might be 4:46thinking what the heck does blur mean in 4:49this context it means not 4:53focused see so why do we need a 4:56dedicated blur State when we already 4:59have a state for when the input isn't 5:01focused we have that first variant of 5:03the input right yes but if the user has 5:06typed something in the field we don't 5:08want the label to move back down and 5:10overlap with what the user has typed 5:13thus we have our dedicated blur state 5:15for when the input becomes defocused and 5:18a value is set perfect let's actually 5:22preview this from the primary variant 5:24when I click there's our Focus variant 5:26with the blue border and when I set a 5:29value and click away there's our blur 5:31variant that keeps the label up and out 5:34of the way there's just one little issue 5:36our blur variant is only triggered if 5:38there's a value in the field if I delete 5:41what I typed then click away nothing 5:44happens easy fix let's get out of the 5:47preview and select the input and Link it 5:50to the primary variant this time we'll 5:53say blur but only when the value is 5:56empty that way it'll return to the 5:58initial state if nothing is typed in the 6:00field let's preview it again now 6:03clicking goes to the focus variant and 6:05clicking away from the empty field goes 6:08right back and of course clicking typing 6:11something and clicking away goes to our 6:14special blur State just like it did 6:15before let's exit the preview and link 6:18up our last bit of logic validation to 6:21do this right we have to consider two 6:23sides of validation what happens when a 6:25user tries to submit invalid data and 6:28what happens when the user fixes it 6:30first we'll create the interaction 6:32linking to our invalid 6:34variant and for this one we'll Choose 6:36You Guessed It 6:38invalid when we preview this I can type 6:41some text that is not a valid email 6:43address and framer logic gives me the 6:45benefit of the doubt that I'm not done 6:47typing yet but if I were to click submit 6:49or click away the invalid value triggers 6:52our invalid variant but now if I fix my 6:55mistake we're still in the invalid State 6:59let's get the preview and fix that by 7:01selecting the input in the invalid 7:03variant dragging an interaction over to 7:06the focus variant and setting this to 7:09trigger on valid all set now when we 7:13preview and end up in that invalid 7:16State fixing the error will revalidate 7:19on the Fly and return us to the regular 7:21State that's it now you know how and why 7:25to turn an input into a component and 7:27how to use variants to power custom 7:29Focus blur invalid and valid states with 7:33built-in validation logic that updates 7:34in real time as a visitor types in a 7:37field now head to framer and create some 7:39super slick forms of your own

TeachesForm Inputs Validation

Watch on YouTube ↗

‹ Interacting with Layers in Framer (Fundamentals Lesson 3)

The Anatomy of a Framer Project (Fundamentals Lesson 2) ›