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

With custom heading size

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