As an app developer I would like to style an input label as a header

[Febakke]

Description

When designing simple forms where there are one question per page or pages where the input is the theme of the page it would be useful to combine the use of header and label. A page with just or normal labels will look empty and weird and you often end up using a header that contain the same information as the input label.

Gov.uk example

If this becomes a simple setting we should have H2 as the default header value.

Screenshots

Specification tasks

• [ ] Development tasks are defined

  Development tasks

Definition of done

• [ ] Documentation (docs.altinn.studio) is updated (if relevant)
  • [ ] Technical documentation
  • [ ] User documentation
• [ ] QA
• [ ] Manual test is complete (if relevant)
• [ ] Automated test is implemented (if relevant)
• [ ] All tasks in this userstory are closed (i.e. remaining tasks are moved to other user stories or marked obsolete)

[mjulstein]

@Magnusrm weren't you working on the inputs in the design-system? @haakemon do you think we should have label and input as separate components in the design-system?

[haakemon]

Label, description and fields are currently separate components, and rendered in separate grid items in app-frontend https://github.com/Altinn/app-frontend-react/blob/v3.44.0/src/altinn-app-frontend/src/components/GenericComponent.tsx#L348-L382

I guess this its done this way to allow long labels/descriptions together with short input fields (since inputfields take 100% width of the parent). Not sure we want to change this.

So input, label (and description) should likely be separate components in the Design system as well.