UI-components

The different components have been made to fit together as a larger whole. This makes it important to follow the guidelines for how they should be used to achieve a consistent and recognizable appearance. UI components that are currently included in Altinn's library are found below.

Do you need a new component?

We wish everyone welcome to contribute to the component library through both code and design. Practically this means that Altinn wishes to accept suggestions for new components as service owners find a need for them.

You are welcome to check the existing components below.

  • Titles and paragraphs

    In most cases, there should be a header (H2) and a paragraph at the start of form pages to summarize the task of the user.

  • Buttons and links

    Main button (blue) is used to send the user to the next step.

  • Input

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

  • Date

    The date picker can be used when selecting a (relatively) recent date. To select dates that are far in the past (or future) a date field can be used instead.

  • Checkboxes

    Check boxes are used in cases where the user can select multiple alternatives in a list of options.

  • Radio button

    Radio buttons are used in cases where the user is picking one of a group of options. The same applies to drop-down lists, so be conscious about which you choose to use.

  • Dropdown

    The pull-down list should be used in cases where the user is picking one of many alternatives, much like the radio buttons.

  • Help texts

    Help texts are small text boxes that can be used to provide explanations to the user.

  • Error messages

    Error messages explain what what went wrong and how to correct it, to the user.

  • File upload

    The file upload module lets the user upload one or multiple files

  • Image

    Use images and illustrations to emphazise points or illustrate concepts which are difficult to explain using text