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 emphasize points or illustrate concepts which are difficult to explain using text