Figma Input

Preview

Figma Input

Figma Input Component

The Input or text field component allows users to enter and validate text data.

Text Input Anatomy

Set	Variants	Properties
Input	54	Type Default, Secondary, Combo BoxSize Small, Medium, LargeState Default, Disabled, Hover, Focused, Warning, Typing
InputMaterial	36	Type Fill, OutlineSize Small, Medium, LargeState Default, Disabled, Hover, Focused, Warning, Typing
InputTextArea	18	Size Small, Medium, LargeState Default, Disabled, Hover, Focused, Warning, Typing
InputSideLabel	18	Size Small, Medium, LargeState Default, Disabled, Hover, Focused, Warning, Typing

The input family is five sets — Input in Default, Secondary and Combo Box types at 36, 44 and 56px, InputMaterial in Fill and Outline, InputTextArea, InputSideLabel and an InputCaption in Default, Danger, Success, Requirements, Password and Informative types — each with Default, Hover, Focused, Typing, Warning and Disabled states.

Text Input AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a text input system in Figma as five component sets. Input: a labelled field with placeholder, optional leading and trailing icons and a helper line, in Default type with a border, Secondary with a filled background, and Combo Box with a trailing chevron, at Small 36, Medium 44 and Large 56px, with six states — Default, Hover with a tinted border, Focused with an accent ring and caret, Typing with entered text and a clear icon, Warning with an amber border and message, and Disabled. InputMaterial: Fill and Outline variants with a floating label that rises on focus, at 56, 72 and 80px. InputTextArea: a multi-line field with a resize handle and a character counter. InputSideLabel: the label placed left of the field for dense forms. InputCaption: the helper line in Default, Danger, Success, Requirements with a checklist, Password with a strength bar, and Informative types. Wire Default to Focused to Typing as an interactive component and bind colours to variables.

The Input field component allows users to enter and validate text data. You can use inputs to create forms, search boxes, filters, dropdown lists, and text areas. Combine inputs with other Forms elements such as Toggles, Checkboxes, and Radios to create multi-step UI flows.

Source