Component

Filter panel

Displays a result count and a toggleable panel with arbitrary content, a submit input, and an optional reset link.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

123,456 results

I can contain arbitrary content, usually a set of filters and sort options.

How to call this component

<%= render "components/filter_panel", {
  result_text: "123,456 results",
  button_text: "Filter and sort"
} do %>
  <p class="govuk-body">
  I can contain arbitrary content, usually a set of filters and sort options.
</p>
<% end %>

Accessibility acceptance criteria

The component must:

• accept focus
• be focusable with a keyboard
• be usable with a keyboard
• be usable with touch
• indicate when it has focus
• toggle the visibility of the panel when interacted with
• indicate the expanded state when panel is visible
• indicate the collapsed state when panel is hidden
• be visible by default without Javascript enabled

Other examples

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

• id - accepts a string for the element ID attribute
• data_attributes - accepts a hash of data attributes
• aria - accepts a hash of aria attributes
• classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
• role - accepts a space separated string of roles
• lang - accepts a language attribute value
• open - accepts an open attribute value (true or false)
• hidden - accepts an empty string, ‘hidden’, or ‘until-found’
• tabindex - accepts an integer. The integer can also be passed as a string.
• dir - accepts ‘rtl’, ‘ltr’, or ‘auto’.

Open (preview)

1,989 seeds

I am open by default!

<%= render "components/filter_panel", {
  result_text: "1,989 seeds",
  button_text: "Open sesame",
  open: true
} do %>
  <p class="govuk-body">
  I am open by default!
</p>
<% end %>

With reset link (preview)

Shows a clear link when the filter panel is open, for example if any filters are selected that can be cleared.

42 widgets

Some filters

Clear all

<%= render "components/filter_panel", {
  result_text: "42 widgets",
  button_text: "Clearable filters",
  open: true,
  show_reset_link: true,
  reset_link_href: "http://example.org"
} do %>
  <p class="govuk-body">
  Some filters
</p>
<% end %>

With filter section (preview)

Pass filter section component as a block

42 universes

Filter 1

1 Selected

filter section content

<%= render "components/filter_panel", {
  result_text: "42 universes",
  button_text: "View filter section"
} do %>
  <%= render "components/filter_section", {
  status_text: "1 Selected",
  heading_text: "Filter 1"
} do %>
  <span>filter section content</span>
<% end %>
<% end %>

With radios and checkboxes (preview)

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

Radios

Checkboxes

Select all that apply.

<%= 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 %>

With margin bottom (preview)

Allows the spacing at the bottom of the component to be adjusted.

This accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale. It defaults to having no margin bottom.

1 partridge in a pear tree

<%= render "components/filter_panel", {
  result_text: "1 partridge in a pear tree",
  button_text: "Loooooads of space",
  margin_bottom: 9
} %>