Framer Form Elements UI Kit

One of areas most lacking in modern-day prototyping tools is also one of the most important elements in a convincing prototype: user input.

As I’ve been tinkering with prototypes lately, I’ve been cataloging the various ways that I’ve allowed for input. I’ve combined those components into one easy-to-use UI kit.

Here’s what it contains:

Normally there's an ad here. 🤔

I run this site by myself, so it would be awesome if you turned off your ad blocker.

Raw Components in Framer Design

Because everything in this UI kit was created with Framer design, you can customize it to match your projects. Cut, copy, and paste your way to a realistic prototype.

Detailed Explanation Through Comments

I’ve taken the time to explain what each line of code does and it works. Follow along with my comments to learn more, or copy and paste the code into your own prototype to make it work for you.

Reactive Data Object

As you try the prototype, you’ll notice everything you do causes the data object on the right to change. By capturing all of this data, you can use it elsewhere in your prototype (like on a “User Profile” page).

Included Components:

Text Input

Drop Down

Stepper

Multiline Text

Radio Buttons

Check Box

Normally there's an ad here. 🤔

I run this site by myself, so it would be awesome if you turned off your ad blocker.


Something missing? Let me know and I can add it to the kit. If you get stuck, feel free to reach out on Twitter and I’d be happy to help.

The UX Tools Newsletter

A simple, monthly newsletter to keep up with industry tools.