TextInput

Molecule

The Text Input Component is a form input component used to capture short, single-line text entries such as names, emails, or search queries. It supports different input types (text, number, search), optional leading or trailing icons, and displays truncated text with a tooltip when the content exceeds the field width.

Playground

Icon

noneadd_home_workadd_layeradd_linkadd_useraialertanchor_chanelangleapplyappsapps_arrowarrows_outwardattachmentattic_wallavataraxesbackbugcalendarcheckcheck_filledchecklistchevron_downchevron_leftchevron_rightchevron_upcircleclosecloud_uploadcollapsecolumnsconstructioncoordinatescubecube_groupcustom_geometrydead_loaddoordouble_chevron_downdouble_chevron_leftdouble_chevron_rightdouble_chevron_updownloaddownwardduplicatedusterdwgeditelement_core_layerelement_inside_layerelement_insulationelement_outside_layererrorexcelexpand_1expand_2export_fileseyeeye_hiddenfibernox_logofibernox_no_tipfilefilterfilter_dropdownfilter_dropdown_messagefilter_removefolderforwardfull_circlegearhelphidden_layerhomehome_workimage_arrow_upinfojva_fjva_njva_n_filledlanguagelayerlayoutlink_offlistlistsloadslockedloginlogoutmailmenuminusmore_optionsmultiple_layersnew_tabno_split_scenenotificationnotification_updateopeningoutputpluspohlcon_logopreviewquestionrectangleredoreloadremove_userrowsrulersandwich_core_layersandwich_insulationsandwich_outside_layersavescreen_with_appsscreen_with_downloadscreen_with_gearscreen_with_webscrollsearchsearch_layersearch_usersendsloped_side_wall_leftsloped_side_wall_rightsplit_scenestandard_wallstar_shinestar_usersumswatchswatch_alertsyncthermoticktrashundounlockeduploadupwarduservillavilla_addvilla_infowindowzoom_inzoom_out

Tooltip

Placeholder

Show Help Text

Label

Label Size

DefaultLarge

Max Length

Help Text Max Length

Delete Text Button

Icon Right

Disabled

Required

Trim

Number

Lazy

Uppercase

Lowercase

Capitalize

Label

        
          

            <
            TextInput

            





            

                label
              
                =
                "Label"
              

                placeholder
              
                =
                "Placeholder"
              

                validation
              
                =
                "info"
              

                tooltipPosition
              
                =
                "top-center"
              

                labelCategory
              
                =
                "compact"
              

                helpText
              
                =
                "This is a help text"
              

                deleteButton
              

                maxLength
              



  />

Anatomy

• Container - is a clickable area of the component that enables and contains user’s input.
• Form Label - Tells the user what they are entering and indicates if the field is required. Can be hidden.
• Icons - optional leading or trailing, but not used at the same time. There is a distinction between when to use a leading and when to use a trailing icon. A leading Icon informs users of an input type to create a better user experience by introducing a relevant icon next to the Input Text. A trailing Icon communicates the action (e.g. to represent the text input to search use Magnifier as a trailing icon) or any additional information.
• Help Text - optional property. It conveys additional guidance about the input field. Help Text can take up to two lines. If Text Input component has a Validation property, Help Text can be used as feedback on the value input by user, informing if the input is Valid or Invalid with appropriate icons and color coding.
• Input text - It can be a placeholder text that can hold an example input text that transforms into user input once user starts typing. Avoid using placeholder text to communicate critical information because this approach is not accessible. Use labels or helper text to describe the purpose of the field and how to use it. If user input is longer than the width of the container allows, text does not wrap down and the container does not grow in size. In this case goes on horizontally until maximum allowed characters are reached and when user stops typing the text truncates with ellipsis on the right side.
• Cursor - A blinking cursor indicates the current location of text input in a field. It is activated when user clicks on clickable area of Text Input and while user is typing. Default HTML cursor can be used, so not shown in Figma.

States

• Text Input includes Default, Hover, Focus, Focus Visible, and Locked states.
• Focus is triggered by a mouse click.
• Focus Visible is triggered when the user navigates to the field using the Tab key.
• In both the Focus and Focus Visible states, a text caret appears to indicate that the user can enter text.
• The Invalid validation state can only have Default and Hover states. When the user clicks on an Invalid Text Input, the validation is cleared and the component transitions to the Focus state. Pressing Tab instead transitions it to the Focus Visible state.
• The Validated validation state can only have Default and Hover states and applies only when the field contains user input (Text=Input). When the user clicks on a Validated Text Input, the validation is cleared and the component transitions to the Focus state. Pressing Tab instead transitions it to the Focus Visible state.

Variants

Type

• Text - expected input is text. Can be used with leading or trailing icons.
• Number - expected input is a number. Units are shown. Icons cannot be shown.
• Search - input has been made and affects something on the interface. Example: filtering search results. This type shows an Icon Button in the place of the trailing icon (which is optional) to allow the user to clear the input field and easily reset the interface.
• The Search type is only available when the field contains user input (Text=Input), as a search field without typed content does not apply.

FormLabel

• Show or hide Form Label.
• Toggle Required.

Text

• Placeholder - sample to prompt user.
• Input - user generated.

Icons

• Leading, Trailing or None

Help Text + Validation

• Show or hide Help Text.
• The Text Input supports three validation states: None, Invalid, and Validated. When validation is applied, the Help Text communicates the current validation result.
• The Validated state is only available when the field contains user input (Text=Input), as an empty placeholder field cannot be positively validated.
• If the Text Input has informational Help Text and a validation state is triggered, the validation message replaces the original informational message. Validation feedback always takes priority over informational Help Text.
• Depending on the use case, validation may be triggered after the user submits the form or moves focus away from the Text Input after editing its value.

Properties

export type InputProps =
  & Omit<FormLabelOptionalProps, 'labelPosition' | 'clickableLabel'>
  & {
    type?: InputType;
    placeholder?: string;
    icon?: IconName;
    iconRight?: boolean;
    searchable?: boolean;
    /** @deprecated Use `searchable`. */
    deleteButton?: boolean;
    validation?: HelpTextProps['category'];
    maxLength?: number;
    helpTextMaxLength?: string;
    fractionDigits?: number;
    step?: number;
    unit?: Unit | string;
    range?: [number | null, number | null];
  };

---

Number Input

Playground

Label slot

Label via Prop

Label Size

LargeDefault

Large

Placeholder

Unit

NonegrkgsNN/mm²kNkN/mkN/m³m cmmm°

Step

Fraction Digits

Show Help Text

Use Range

Disabled

Info Icon

Required

Tooltip

Tooltip Position

Top CenterTop RightTop LeftBottom CenterBottom RightBottom Left

Top Center

Label

Tooltip

        
          

            <
            NumberInput

            





            

                label
              
                =
                "Label"
              

                labelCategory
              
                =
                "large"
              

                step
              
                =
                "0.01"
              

                fractionDigits
              
                =
                "2"
              

                range
              
                =
                "[
  0,
  150
]"
              

                placeholder
              
                =
                "1000"
              

                helpText
              
                =
                "Help Text"
              

                validation
              
                =
                "info"
              

                tooltip
              
                =
                "Tooltip"
              

                tooltipPosition
              
                =
                "top-center"
              

                useHelpTextIcon
              



  />

Properties Number Input

export type InputProps =
  & Omit<FormLabelOptionalProps, 'labelPosition' | 'clickableLabel'>
  & {
    type?: InputType;
    placeholder?: string;
    icon?: IconName;
    iconRight?: boolean;
    searchable?: boolean;
    /** @deprecated Use `searchable`. */
    deleteButton?: boolean;
    validation?: HelpTextProps['category'];
    maxLength?: number;
    helpTextMaxLength?: string;
    fractionDigits?: number;
    step?: number;
    unit?: Unit | string;
    range?: [number | null, number | null];
  };

export type FormLabelCategory = "default" | "large";
export type FormLabelPosition = "labelTrailing" | "labelAbove" | "labelLeading";

export interface FormLabelProps extends TooltipProps, Omit<Partial<HelpTextProps>, 'category'>, ElementProps {
  label?: string;
  labelCategory?: FormLabelCategory;
  labelPosition?: FormLabelPosition,
  disabled?: boolean;
  required?: boolean;
  infoIcon?: boolean;
  clickableLabel?: boolean;
  helpTextIcon?: IconName;
  helpTextCategory?: HelpTextProps['category'];
  /**
   * @deprecated Use `helpTextCategory` instead. Will be removed in the next major release.
   */
  category?: HelpTextProps['category'];
}

export type TooltipPosition = 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';

export interface TooltipProps {
  tooltip?: string;
  tooltipPosition?: TooltipPosition;
  tooltipLines?: number;
}

INFO

Note: Text Input component’s width scales responsively to adapt to the viewport and screen size. Therefore, maximum and minimum allowed width should be adjusted according to the use case in every application.

Developer Notes Number Input

NOTE

Change Event (@change): Triggered when the input changes. The event sends the updated modelValue as payload.
Blur Event (@blur): Triggered when the input is unfocused.
Keydown Event (@keydown): Triggered when any key from the keyboard is pressed while component is focused.

Functionality

Once a NumberInput element is in :active state, you can use your keyboard to manipulate the input, too.

• Arrow up: increase input by 1 * step
• Arrow down: decrease input by 1 * step
• Ctrl + Arrow *: increase/decrease by 10 * step
• Ctrl + Shift + Arrow *: increase/decrease by 100 * step

You can also specify ranges for the allowed input values. When inputting values out of bounds, an invalid help text will be displayed, indicating the corresponding overflow.