TextInput

Molecule

Usage

Allows users to input text formats in a field. Pressing ‘Tab’ converts the Text Input component into Focus state, as well as clicking on the component. In both scenarios component has a blinking cursor indicating readiness to type. If the contents of the component are longer than the width of the container, then the text will get truncated and a Title attribute (a native HTML element like Tooltip) will display the full text that is being hidden.

Properties

export type TextInputProps =
  & FormLabelOptionalProps
  & {
    modelValue: string;
    placeholder?: string;
    icon?: IconName;
    iconRight?: boolean;
    deleteButton?: boolean;
    helpText?: string;
    validation?: HelpTextProps['category'];
  };

Configurations

Text Input
type	Input field element
Normal
No Icon
Info	Help text goes here.
Invalid	This field can not be empty.
Validated	Entry validated.
Disabled

Text Input - with FormLabel
Sizes	Label Above	Label Leading
`small`	Form label Help text here.	Form label Help text here.
`medium`	Form label Help text here.	Form label Help text here.
`big`	Form label Help text here.	Form label Help text here.

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 then 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

Includes Default, Hover, Focus and Locked.

The Invalid type can only have Default and Hover states. When user clicks on an Invalid Text Input it resets to Default and is in Focus state. The Validated type can only have Default and Hover state. Once user clicks on a Validated Text Input it resets to default (no validation) state and is in Focus 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.

Label

Show or hide 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. Help Text can show Validation as None, Invalid or Valid if there is a validation in the specific Text Input component. Validated and Invalid statuses use Help Text to display a descriptive message on the status of validation. If a Text Input component is With Help Text (of type Info) and it is also With Validation then Validation related status display within a Help Text overrides the original Help Text of the type Info, which means validation message has more weight than the Help Text of type Info. Depending on the use case, validation can happen either after active submission of the form by user or when user clicks elsewhere after typing in the Text Input.

Gaps and Sizes

Container height: XLplus (Fixed)
Gap between Form Label and container - Label Above variant: 2XS
Gap between container and help text: 2XS
Text and leading icon are left aligned
Arrow is right aligned
Gap between Placeholder/Input text and Trailing icon: max. space between, min. S
Gap between Leading icon and Placeholder/Input text: S
Container padding: S

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.