The properties of an input allow for a basic focus effect, but we can take the customization a whole lot further using components. In this guide, we’ll look at how component variants can power custom focus, blur, invalid, and valid states — with built-in validation logic that updates in real time as a visitor types in a field.
Designing the Primary Variant
First, we’ll create the foundation for our design by setting up the primary variant of the input field. Start by selecting the entire label frame around the input, right-clicking, and choosing “Create Component.” Next, change the variant frame’s height to “Fixed”, and set the email label to “Absolute” positioning for greater flexibility. If the input field jumps to the top, it’s due to the vertical stack’s relative positioning. You can fix this by changing the stack to distribute from the bottom.
Once that’s done, delete the input’s placeholder text on the Properties Panel and move the label text box onto the input field to serve as the placeholder. Then we’ll slightly increase the font size to 14px and ensure the text box is evenly inset.
Creating and Styling Variants
Time to create some variants for the other states and style them. With the primary variant in place, we’ll now create additional variants that respond to user interactions. Let’s begin by creating a second variant and renaming it “Focus.” In this state, move the placeholder text back up and reduce its size to 12px. Before moving on with the styling, create two additional variants named “Blur” and “Invalid,” which will share the same layout as the Focus state. To ensure smooth transitions, you’ll add a border to the input of the primary variant, setting it to 2px width with a color opacity of 0%. Then, customize the “Focus” variant by changing the border color to blue, and for the “Invalid” variant, we can change both the border and text color to red to draw attention.
Adding Interactions
Great, now we have our four states, we just need to add the interactions. You can add interactions the “Primary” variant and the interactions will be inherited by the other variants. Start by selecting the input field and then drag the interaction handle to the Focus variant. Now because this interaction is triggered by an input field, we get some input-specific options here for when to trigger this interaction. In this case, we are linking to our “Focus” variant, so naturally, we’ll trigger this on “Focus”. I’ll leave the value set to “Any” which means we’ll go to our “Focus” variant whether the user has typed a value into the field or not. That’s it. Repeat this for the blur state. Select the input, drag and interaction over to the “Blur” variant, and choose to trigger on “Blur”. Go ahead and preview this from the “Primary” variant. When you click, you’ll see your “Focused” variant with the blue border. When you set a value and click away, there’s our “Blur” variant that keeps that label up and out of the way.
There’s just one little issue, this blur variant is only triggered if there’s a value in the field. If you delete what you typed, then click away, nothing happens. Easy fix. Get out of the preview and select the input, then link it to the primary variant. This time, trigger on “Blur” — but only when the Value Is Empty. This way it’ll return to the initial state if nothing is typed in the field. Let’s preview it again. Now clicking goes to the Focused variant and clicking away from the empty field goes right back. And of course clicking, typing something, then clicking away goes to our special Blur state just like before.
Setting up validation
Let’s exit the preview and link up our last bit of logic — validation. To do this right, we have to consider the two sides of validation:
What happens when a user tries to submit invalid data.
And what happens when the user fixes it.
First create an interaction linking to the invalid variant and for this one choose to trigger it on “Invalid”. Now when you preview, you can type some text that is not a valid email address and if you click away, the invalid value triggers the invalid variant. One last issue: If you fix the text in the field — you’ll still be in the invalid state. Let’s get out of the preview and fix that by selecting the input in the Invalid variant, dragging an interaction over to the Focus variant, and setting this one to trigger on “Valid”. All set! Now when you preview and end up in that invalid state, fixing the error will re-validate on the fly and return you to the regular focus state.
