1. Component Guide
  2. Form radio button
  3. With page header and caption
Form radio button example

With page header and caption

If a caption text is provided with a page heading, it will be displayed above the heading. A caption can only be used with a page heading. If a heading is not provided the caption will not render. The pattern is used across GOV.UK to show a high-level section that this page question falls into.

How it looks (preview)

Question 3 of 9

Is it snowing?

How to call this example

<%= render "govuk_publishing_components/components/radio", {
  name: "radio-group-heading",
  heading: "Is it snowing?",
  heading_caption: "Question 3 of 9",
  is_page_heading: true,
  items: [
    {
      value: "yes",
      text: "Yes"
    },
    {
      value: "no",
      text: "No"
    }
  ]
} %>