Figma input components

Forms are where products quietly win or lose. Sign up, checkout, settings: every high-stakes flow in your product runs through input fields, and users notice when they're inconsistent or half-finished.

The 7 input components and 188 variants above exist so you never have to improvise a field type mid-design.

The anatomy of a well-built input field

A production input is more than a rounded rectangle. Each field here includes a label, the input container, placeholder text, an optional hint line underneath, and an error message that appears in the destructive state.

One rule worth internalising: the placeholder is not the label. Placeholder text disappears the moment someone starts typing, and Nielsen Norman Group's research shows placeholder-as-label fields strain short-term memory and harm accessibility.

Every input in this set keeps a visible label above the field, which is also what the W3C's form labelling guidance requires for screen readers.

The hint text line earns its place too. It's where format guidance lives ("Must be at least 8 characters"), and in the error state it's replaced by a specific message about what went wrong. Writing "Enter a valid email address" next to the field beats a generic red border every time, and because the message is part of the component, your developers inherit the pattern instead of inventing their own.

Every state, including the ones designers forget

Each input ships with placeholder, focused, filled, and disabled states, plus a full destructive set for validation errors with the field border, hint text, and error message styled together. The focused state carries a visible focus ring rather than a subtle border shift, so keyboard users can actually see where they are.

Having every state as a variant means your error states are designed before the edge case shows up in development, not after.

Filled deserves a special mention because it's the state real interfaces spend most of their time in, and the one designers test least. Mockups full of pristine placeholder text hide problems like values overflowing narrow fields or long email addresses colliding with trailing icons. Flip a whole form to its filled variants early and those surprises show up while they're still cheap to fix.

Beyond plain text: the input types you'll actually need

Real products need more than a text box. This set includes inputs with leading text and leading dropdowns (think URLs, currency amounts, and phone numbers with country codes), trailing buttons and dropdowns, password fields, payment card inputs, date and time pickers, file upload fields, vertical and horizontal number counters, tag inputs, and verification code (OTP) inputs in 4 and 6 digit versions.

Each type comes in three sizes and every state, so a payment form and a settings page draw from the same system.

Pair them with select inputs and checkboxes to cover complete forms. The same fields build the forms in the contact sections and contact pages examples.

The specialised types are where the time savings compound. A verification code input sounds simple until you're drawing six separate boxes with focus states at 11pm before a release. Here it already exists, in both 4 and 6 digit versions, matching the text fields around it.

Built with Auto Layout and variants

Every input uses Auto Layout, so fields stretch to fill their container, hint text pushes content below it instead of overlapping, and switching a field from default to error is a variant flip that preserves your label and value. That's the difference between adjusting one property and rebuilding a form row by hand every time validation fails.

When it's time to build, the same inputs exist in code. Untitled UI React inputs are open source, built with Tailwind CSS and React Aria, with label association and keyboard behavior handled for you.