Last modified: May 28, 2024

Input

Input fields are used when the user is submitting text or a number.

Normal input field

Guidelines:

  • An input field should always have a related label with explanatory text.
  • Evaluate if further explanation and helper texts should be connected to the element.
  • Two input fields can be placed beside each other if they are somehow connected, see the example below.
  • Deactivated fields should be avoided. If a field cannot be edited, the information should instead be presented as text.

Example of usage:

Width of an input field

The width of an input field should reflect what is expected as input from the user. We currently have three standard sizes that should reflect most scenarios and cover different screen-sizes. Read more about how to change the sizes here.

Small inputs

The smaller inputs are more fitting for collecting information like phone number, postage number and year.

"grid": {
    "xs": 12,
    "innergrid": {
        "xs":5,
        "sm":3, 
        "md":2
    }
}

Medium input

Can be used for collecting information like municipality or country

"grid": {
    "xs": 12,
    "innergrid": {
        "xs":8,
        "sm":6, 
        "md":6
    }      
}

Long input

Can be used for collecting information like name, e-mail address or a URL

"grid": {
    "xs": 12,
    "innergrid": {
        "sm":10 
    }
}

Large text fields

Large text fields are used when the user has to fill in a longer explanation. Large text fields follow the same guidelines as input fields.

Example of usage:


Address

For addresses, there is a rigid setup where the postal code and city is on the same line, below the address input line. City is automatically set based on the postal code input.

Example of usage: