Skip to content
search icon
clear
Component Status

Text fields

Figma

How to add

  1. Locate the Assets tab in the Layers Panel.
  2. There are two ways to locate the Text field component needed:
    • Use the search bar to search for a component grouping name or variation name.
    • Scroll through the folders list and open the grouping.
  3. Once the component needed is located, click and drag it into the frame/artboard.

How to use

  1. Select the Text field in the frame/artboard.
  2. Locate and expand the highlighted layer in the Layers Panel.
  3. Toggle off the groupings that are not needed. All groupings besides Unit are on by defualt.
  4. Never add height to Text field/Inputs, only resize them horizontally in width. Text field/Area can be resized in both height and width.
  5. In the Layers panel show the unit and/or placeholder icon as needed and adjust the unit text. Drag and drop an icon from the assets panel directly into the placeholder icon using:
  • Mac: Command + Option
  • PC: Ctrl + ALT

API

PropertyTypeRequiredDefaultDescription
classNameStringfalse[Empty String]@ignore
placeholderStringfalse[Empty String]Placeholder text
helperTextStringfalse[Empty String]Helper text
labelStringfalse[Empty String]Label text
metaStringfalse[Empty String]Meta text
disabledBoolfalsefalseDisabled
variantEnumfalsedefaultVariant
multilineBoolfalsefalseMultiline input
inputRefUnion
Function │ Object
falsenullInput ref
inputIconElementfalsenullInputIcon
helperIconElementfalsenullHelperIcon
idStringtrue-Input unique id
Edit this page on GitHub