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

With heading

By default, text supplied for the legend is wrapped inside a h2.

The font size of this heading can be changed using the heading_size option. Valid options are s, m, l, xl, defaulting to m if no option is passed.

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