1. Collections Component Guide
  2. Form radio button
  3. With custom heading size
Form radio button example

With custom heading size

This allows the size of the legend to be changed. Valid options are s, m, l, xl, defaulting to m if no option is passed.

If the is_page_heading option is true and heading_size is not set, the text size will be xl.

How it looks (preview)

What is your favourite colour?

How to call this example

<%= render "govuk_publishing_components/components/radio", {
  name: "radio-group-description",
  heading: "What is your favourite colour?",
  heading_size: "s",
  items: [
    {
      value: "red",
      text: "Red"
    },
    {
      value: "green",
      text: "Green"
    },
    {
      value: "blue",
      text: "Blue"
    }
  ]
} %>