Morningstar Design

Anatomy

Label sets the label of the text input.
Field box (single line) is the interactive element of the text input and contains the entered data on a single line.
Field text sets the required data.
Helper text gives extra information when needed, to enforce the required information for the field or to give context when an error happens.
Field box (multi-line) is the interactive element of the text input. It contains the entered data on a text area for multiple text lines.
Scroll bar allows users to scroll through the text area space when it reaches the maximum visible lines.

When to Use

Use a text input when you want the user to enter text (short or long) and edit it.

When Not to Use

Don’t use a text input when you want the user to choose from a set of options. Use checkboxes (for multi-select), radios (for single-select), or selects instead.


Variation	Purpose	Icon/Scroll Bar	Sizes
Single line	Use for short text answers.	With icon, no icon, no scroll bar	LG, MD
Multi-line	Use for potentially long text answers.	No icon, with scroll bar, no scroll bar	LG, MD

Single Line No Icon

Use when the text input doesn’t need any context or an extra action.

Single Line With Icon

Use when you need a specific type of information and you want to give the user extra context with the icon, or when you want to add an action to the input (such as search, hide, or view the text from the input).

Multi-line No Scroll Bar Active

All entered text is visible in the text area.

Multi Line With Scroll Bar Active

When the text fills the visible text area, the scroll bar becomes visible.

The alignment of text inputs with their container or in relation to content at the same level of the page should follow a left-justified pattern.

Text inputs are mostly used in forms, alongside other form elements, to ensure the proper hierarchy of the available user actions. All the form elements used, should have the same size.