Text Input

Text Input allows users to enter and edit alphanumeric data. Use them to gather short-to-medium-long data entries.

Guidelines

When to use:

Unpredictable content: When it is impossible to predict the information that a user needs to enter.

Complex alternative: If a user can enter the data more quickly in a free-hand format than with a more complex alternative control.

When not to use:

Predefined options: if a user can only enter an option from a predefined list, use a selection control such as a Select or Radio Button Group instead. This helps to avoid errors.

Long data entries: if the entered data is expected to be longer and would benefit from a multiline view, use Text Area instead.

Properties

Size

Size guidelines of the Text Input are shared with other field components. They have been described on the dedicated Fields page.

Max characters count

When you want to restrict the length of data the user enters, you can specify the maximum number of characters allowed. A character counter is displayed below the input field, which dynamically updates the ratio of characters used to the total character limit. If the user exceeds the maximum character count, an error icon appears, and the input box and counter turn red. However, all the characters will remain visible, allowing users to review their input and manually delete characters to meet the field validation requirements.

When the user exceeds the allowed maximum character count, an error icon appears, and the input box and counter color change to red.

Indicative Icon

A static icon is displayed on the left side of the container as an additional cue for the input’s purpose. It should be used carefully and only with universally recognized icons.

Interactive Icon

An Interactive Icon displays an Icon Button on the right side of the container, offering an additional action associated with the field, such as allowing for alternate input methods.

Don't

• Don't use indicative icons if you cannot select unique visuals for each input
• Don't use ambiguous indicative icons (envelope can be understood as postal address or email)
•Don't use an indicative icon for the concept (like a house address) if the information is separated into multiple fields.

• Use indicative icons in short forms
• Indicate inputs purpose with universally recognized icons only
• If not sure, it's betetr to not include an icon than to use a wrong one.

Inline

Inline property is shared with other field components. They have been described on the dedicated Fields page.

Clearable

If it makes sense to help the user quickly delete the entered data, you can enable the Cleareable property, which will display an Icon Button with a cross on the right side of the container. When a user clicks on it, all the data previously entered will be deleted.

Text alignment

The Text Input component allows for both right and left text alignment. However, it is recommended to use the alignment to the right for single inputs or when multiple inputs are aligned horizontally. Vertical forms with different text alignments may pose difficulties for users when scanning and filling out the form.

Consider using the right alignment when input makes use of a suffix and is horizontally aligned with other inputs.

Don't

Don't mix different alignment settings in vertically oriented forms.

Behavior

Overflow content

When the content the user enters is longer than expected and overflows the input box’s boundaries, it will scroll horizontally to show the part that is being edited. When the user exits the field, it will automatically scroll back to the beginning. Later, the user can review and edit the entire content using keyboard interactions to move between characters and words.

Mouse interactions

Users can activate the Text Input by clicking on the field container. A separate click is required to activate the Interactive Icon actions.

Keyboard interactions

Key	Interaction
Tab	Sets focus on the Text Input
Tab x 2	Sets focus on the associated action
Enter or Space	Activates interactive icon action when in focus
left/right arrows	Moves cursor character by character inside the container
ctrl or opt + left/right arrows	Moves cursor word by word inside the container
ctrl or opt + up/down arrows	Moves cursor to the start or end of the content

Content

Content guidelines of the Text Input are shared with other field components. They are described on the dedicated Fields page.