1. Collections Component Guide
  2. Form input
  3. With label as heading
Form input example

With label as heading

Wraps the label in a heading tag. Valid options are 1 to 6. To adjust the size of the label/heading, use the heading_size option. Valid options are ‘s’, ‘m’, ‘l’ and ‘xl’.

Based on the heading/label pattern in the Design System.

How it looks (preview)

How to call this example

<%= render "govuk_publishing_components/components/input", {
  label: {
    text: "This is a heading 1 and a label"
  },
  name: "name",
  heading_level: 1,
  heading_size: "l"
} %>