Form radio button example

With visually hidden heading

If the heading/legend on the radios is not required, it can be visually hidden using this option. It will still be visible to screen readers.

How it looks (preview)

How to call this example

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