TextInput

Usage

Example

Principles

• A label should always be provided with a text field.
• Use a text input when a single line of text is expected. For multiline inputs, use a TextArea component.
• Allow the text input to reflect the length of the content you expect the user to enter.
• If possible, add programmatic assistance. Detect and pre-fill inputs to reduce errors and save time. Use sentence-case for default values, detected values, and auto-completion text.
• If possible, do input validation in client-side real-time and provide the user with immediate feedback. See HDS Form validation pattern page for more information.
• If possible, be forgiving of different input formats and small mistakes. It can greatly increase user experience of your product if you can fix common mistakes for the user.
• When given the required prop, there will be an asterisk (*) added after the label to emphasise its required status.
• To decrease a cognitive load of the user, it is recommended to mark all required fields. Remember to provide explanation of the required field indicator at the top of your form.

Variations

Default

A text input serves in most use cases when the user needs to enter information. Text input works well for short inputs that fit in one line and are not longer than one sentence.

Read-only

Read-only text input is used to indicate an input among other inputs that cannot be edited. This is needed in situations where, for example, the information has been gathered from other source and filled automatically. Read-only fields should not be confused with disabled text fields. Disabled text fields are used when there is an action the user can make to activate the field. Read-only text fields will stay uneditable in the same view.

With tooltip

A text input can be provided with additional tooltip. Tooltip information should be considered as extra information, for example, why this information is gathered or how is it used. The user should have sufficient information on how to fill the input field in label and assistive text. You can find more information about Tooltips how they are used from the Tooltip documentation page.