Filter panel example

With radios and checkboxes

Overrides default styles of GOV.UK Frontend radios and checkboxes to ensure they have a white background despite being inside a grey panel.

How it looks (preview)

Radios

Checkboxes

Select all that apply.

How to call this example

<%= render "components/filter_panel", {
  button_text: "Filter with radios and checkboxes",
  open: true
} do %>
  <div class="govuk-!-padding-4">
  <%= render "govuk_publishing_components/components/radio", {
    heading: "Radios",
    name: "radio",
    small: true,
    items: [
      { value: "1", text: "Radio 1" },
      { value: "2", text: "Radio 2", checked: true }
    ]
  } %>
  <%= render "govuk_publishing_components/components/checkboxes", {
    name: "checkbox",
    heading: "Checkboxes",
    small: true,
    items: [
      {
        label: "Red",
        value: "red"
      },
      {
        label: "Green",
        value: "green"
      },
      {
        label: "Blue",
        value: "blue"
      }
    ]
  } %>
</div>
<% end %>