Text fields

A text field lets users enter, interact and edit content, typically in forms and dialogs.

Guidelines

Text fields are used for long and short amounts of text. Text inputs are for a single line of text while Text areas are for more than a single line of text.

The component includes options for writing unit for the field and a placeholder icon. This component uses auto layout to place icon and/or unit with the right spacing next to each other.

Don't

• Do not remove the label.
• Do not use placeholder text instead of the label.
• Do not use as search.
• Do not end placeholder text with a period for inputs.

Variations

Label

A label text is always required, and helps users know what information is expected from this field. The label can either be above (as it is built into the component in Figma), or to the left of the field (done by hiding the built-in label in Figma and adding a new label to the left).

Required and optional fields

If a text field is used within a form, it is highly recommended to mark required fields, as it is an easy way to improve the user experience. Markings of required and optional fields are done in the Label. An asterisk placed to the left of the label is great for longer forms, but it is accepted to place the asterisk to the right of the label in shorter forms with 8 or less input fields. To mark optional fields you add (optional) at the end of the Label. See example in Figma.

Meta

Character count and unit can go in meta grouping.

Placeholder text

Placeholder text should provide hints or examples of what text to enter. For wording, use "e.g. Stavanger" and not "Name your town". For numbers, use "9-digit number" and not "Example: 123-456-789". Placeholder text disappears after the user begins to type, so it should not contain critical information. Also, not all screen readers are capable of reading placeholder text. If the user does not type within the field, the placeholder text reappears in the field.

Input text

For input text containing numbers only, use the style Input/Text monospaced for better readability. For example for phone numbers, values etc.

Validation and errors

An error or warning must always have helper text with an icon or an icon in the field. Use real-time validation to help streamline the process and make the user experience smoother. Wait to validate until the user has finished interacting with the field.

Validation helper text should use a passive tone as not to blame the users. For wording, use "Platform name required" and not "You did not enter a platform name".

Unit

Units in text fields are optional. Units should be used to explain the unit of the relevant text field, and be abbreviated if a standard unit is used.

Icon

Icons in text fields are optional. Icons can be very helpful in expressing extra functionality, input methods or indicating validation.

• Valid, error or warning
• Clear
• Voice input
• Dropdown
• Loading

Helper text

Help text is always visible to assist the users and should not be hidden behind a tooltip.

Examples

Input

Area

Demo

Types

Variants