Input

Best practice

• Use natural language when writing form labels.
• Use the length of form fields to indicate the “format” of a proper answer.
• Use hint text to provide more context to the question being asked.
• Before adding an icon, affix or clear button to the input, consider carefully if it is appropriate for the specific use case and if it actually helps the user.
• Error messages should be clear, concise and should provide actionable remedies to resolve the errors.
• The label should describe what to input and not how.
• Use natural language and use the terms that the user would expect.
• Don’t use verbs like enter, add, input etc in the label.
• Don’t add a colon ( : ) at the end of the label.
• Use the help text to provide additional context and explanation.

Input types

The input component supports different input types. Specifying the input type gives you out-of-the box validation in modern browsers and prompt the most suitable keyboard on mobile devices e.g. number keyboard for the input type telefone. The component support the following input types:

• text
• telephone
• url
• email
• number
• password

Icons

The input can show an icon and a trailing icon (to the left and to the right respectively).

Clickable trailing icon

If you place an icon to the right, then you also have the option to make it clickable. The most common use case is for password inputs where the user can show and hide the typed password and check whether the password is typed correctly.

Prefix and suffix

A prefix or suffix can be added to provide the user with additional help and affordance when filling out the text input. Typically suffixes and prefixes are used to indicate a unit that goes together with a numerical value.

Only use the prefix or suffix for symbols and standard abbreviations, and units of measurement.
e.g. USD, kg, m², m³, ft³/h, °C, etc.

In addition to suffixes and prefixes use labels, tooltips, and hints to provide more context and guidance on what information is required from people.

Clear button

A clear button can be added to the input and is a shortcut action allowing the user to clear the current value. It is useful for clearing search fields and on mobile devices where entering information can be a cumbersome task.

Label

By default, the component has a top-positioned label. It is possible to change the position of the label to be left-positioned. We recommend that you use the top-positioned labels wherever possible, especially in forms. You can read more about why we recommend top-positioned labels in our form guidelines.

Placeholder

Placeholder text can help users understand what kind of information they need to provide, and how to format it correctly. If the expected information has a standard format, it is better to use Input mask to assist the user.

Input mask

Use an input mask when you require users to enter information in a standardised format. It will assist users in entering the correct information in the right format and will help prevent invalid input.

Hint text

Use the hint text to provide additional information that can assist the user to fill out the field. Hint text is placed to the left below the input and stays permanently there while the user is typing.

Error state

Highlight an invalid text input with a red border and a red error message placed beneath the input field. Error messages should be clear, concise and provide actionable remedies to resolve the errors.

Vanity variant

The component supports the “vanity” style variant.

Please read more about this variant on our form guidelines page.

Related pages

• Content -> Labels
• Guidelines -> Forms
• Guidelines -> Input masks