Input

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

On this page:

Normal input field

Guidelines:

  • An inputfield 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 textfields

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:


Adress

For addresses, there is a rigid setup where the post number and postage place is on the same line, below the address input line. Postage place is filled automatically based on post-number-input.

Example of usage: