Chlorophyll
Styles
The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.
Consequently, we have decided to not include support for IE in the Design Library website.
Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.
Input fields allow users to add and edit text.
Styles
Javascript
Javascript
Input fields typically reside in forms, but can appear in other places like dialog boxes and search. Input fields can help users validate input and fix errors, they can also autocomplete words and provide suggestions.
Input field labels describes the type of input a field requires and is key to making an accessible UI. Labels are placed above an input field. Use short and descriptive labels (a word or two) so that users can quickly scan your form.
Placed between the label and field, it helps the user with instructions for what to enter (i.e the format) in the field or how to interpret the label. If multiple form-fields are placed horizontally, the instruction is placed under the field to help alignment of the fields.
If more help is needed, use Contextual help buttons with a tooltip for short descriptions, or a slide-out modal for longer ones.
Placeholder text is placed within the input field and disappears when the user starts entering text. Use only when absolutely needed as it often adds confusion. If you do use it, consider to add the word "Example" before, so the user doesn't think it is already prefilled. If users need the information after entering data, a field instruction should be used.
Input fields can be formatted to indicate the types of data a field accepts, using placeholder text. The inputted text is also formatted. Characters can be formatted using:
More about Formatting guidelines
To indicate that a field is optional, display the word “optional” (or "valfritt") in parentheses next to the field label. Generally strive for only having fields that we actually need the user to fill in. If it’s not needed, then it can perhaps be removed from the form.
Make static data stand out from its' label header.
Input text can be used with autocomplete to help users who have limited literacy or who write in a foreign language.
Use character or word counters where there is a character or word limit.
Also known as text area.
The smaller smaller input fields can be used in tables and lists. Label is hidden and headline in column will be used for description instead
This component should be used when a button is needed next to an input field and it needs to be clear that an action is linked to the input field. For example, fetching information from a database, signing up to a newsletter, etc.
In mobile viewport, the group is seen as one module and shares the width.
Use the search component to help users find data. There are two versions of the component, functional (button to the right) and decorative (icon to the left).
Read about Search
When input isn’t accepted, text fields can display an error message below the input line, with instructions on how to fix the error. Until the error is fixed, the error replaces the helper text.
The same copy principles can be used for labels, radio button texts, choices in drop-down menus, headings, page titles, navigation texts, link texts and other short texts.
The texts should be clear and informative. Avoid information-poor words such as information, important, welcome and regarding.
The texts should be as short as possible. Labels can, but need not, be complete sentences. In some situations, we use the query format to push the information that customers need to leave, such as What do you want to buy? How much do you earn? How do you get your main income? etc.
In the label itself, you do not need to use verbs such as Enter, Fill in, Write or Choose that tell the customer what he or she is supposed to do. For instance, write Recipient's name instead of Fill in the recipient's name. And when the recipient's name is displayed in a summary, it is sufficient to only write Recipient.
The field instruction, or field help texts, are used to explain input field labels, column headings and subheadings. Ideally, the short text should be self-explanatory so that no field assistance is needed. Use field help only when something needs to be explained that is not clear from the label.
Explain what the customer needs to know to fill in the field or understand the data displayed. Be brief.
Distinguish between the label, the field instruction (help texts) and the placeholder text. The label tells you what to enter, the placeholder text how to fill in data, what format to use or why the customer should enter the data.
You can use placeholder texts for instance showing a pattern that the customer can use, such as YYYYMMDDNNNN when logging in or how a phone number might look like, Example 070123456.
There is not much space adjacent to the input field. Therefore, provide a constructive suggestion on how to solve the problem instead of telling what the customer has done wrong.
For tables and lists.
About dark mode: Pattern: Dark mode
More about rem