Internet Explorer is not supported by Design Library

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.

Form design

A form is a structured page with spaces in which to write or select.

Guidelines

Short description

Forms are a great way to simplify complex processes, while also being able to validate the requested input. Forms can come in a single page or as a part of a multipage flow/wizard.

 

When and how to use it

A form is a type of conversation between the user and the app. Users can be reluctant to fill out forms, so make the process as easy as possible. Make sure to ask only what you really need and always test your form design on real people.

Group the information

Group related information into logical sets and use a logical order from the user's perspective. The flow from one set of questions to the next, will then better resemble a conversation and make more sense to the user.

Keep it simple and down to a bare minimum of fields. Use the ability to show/hide parts of a form depending on the answer to a question.

Mandatory or optional

Consider all input fields carefully so they are all mandatory. But if you do need an optional input, add the word “optional” (or "valfritt") for non-required fields.

More about input fields here: input fields

Accessibility

Users should be able to focus on and edit every field using only the keyboard.

Error handling

About Error handling

 

Behaviour

Use the space wisely:

  • In narrow resolutions (such as for mobile) expand the input elements and buttons to make use of the whole viewport width.
  • There is no need to use the whole width of a wide viewport. Stack the form elements on top of each other in new rows instead of aligning them horizontally.

About button placement: Button

 

Do's and don'ts

  • Make CTAs descriptive and state the intent
  • The user will make sense of the form much faster if there are logical groups
  • Use positive inline validation - reinforce a positive behaviour while typing

 

  • Don't stack fields horizontally, keep it below two or three at the most
  • Avoid making input fields too long - they should match what is required

 

Related patterns and components

Templates

Templates

Desktop

Form template for desktop

Mobile

Form template for mobile 

Subsections

Page last updated

Feedback

Was this helpful?