Figma Form

Preview

Figma Form

Form is the universal term for elements that capture and submit user input within your UI. Whether you’re initiating processes, signing in, requesting data, or making a purchase, forms will follow every interaction a user makes.

A form consists of form fields or inputs, which are standalone components inside the form. These input elements include Text Areas, Date Pickers, Toggles, Counters, and Selects. You can mix and match these components to create full-fledged forms. Other elements like radio buttons, checkboxes, and buttons are not part of a form field.

We can use each input component without wrapping it inside a form field and make it function independently. Still, a Form unites these input fields, allowing them to track user input and produce fully functional outcomes.

A Form component is what unites these separate inputs. The form fields include labels, errors, hints, prefixes/suffixes, and icons. On this page, you’ll find a collection of Figma Form examples showcasing how these components come together.

The Form component unites the kit's standalone inputs — text, select, date, textarea and number fields — into one field block with label, hint, error, prefix and suffix slots, and this page collects the Figma form examples that show them assembled.

Form AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a form field system in Figma. FormField: a wrapper component with a label above, the input instance in the middle and a helper line below, with Booleans for a required asterisk, a hint, an inline error message with a red icon, a character counter and a leading or trailing prefix and suffix such as a currency sign or unit. Input type property: Text, Email, Password with a show toggle, Number with stepper arrows, Search, Textarea, Select with a chevron, Date with a calendar icon, Phone with a country code segment and File upload. States: Default, Hover, Focused with an accent ring, Filled, Error with a red border, Success with a green tick and Disabled. Sizes: Small, Medium and Large. Then assemble three example forms from FormField instances only — a sign-up form, a shipping address form with a two-column row for city and postcode, and a profile settings form — each with Cancel and Submit buttons. Keep labels, hints and errors on text variables so wording changes propagate everywhere.

For full layouts like login, payment and signup, the Figma forms blocks assemble these fields into ready page sections.

Figma Form

Forms

figma form template

figma form design

forms examples

Interactive component

‭‭← Previous component

Chart

Component

Next component →

Avatar