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 GOV.UK Design System.

How it looks (preview)

This is a heading 1 and a label

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"
} %>