Component

Filter section

Displays a section with status text that be expanded/collapsed

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Filter by Some metadata field

Filter form controls

How to call this component

<%= render "components/filter_section", {
  heading_text: "Some metadata field"
} do %>
  <span>Filter form controls</span>
<% 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 section when interacted with
  • indicate the expanded state when section is visible
  • indicate the collapsed state when section is hidden

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-
  • margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale (defaults to no margin)
  • 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)

Filter by Some metadata field

Filter form controls open by default 
<%= render "components/filter_section", {
  heading_text: "Some metadata field",
  open: true
} do %>
  <span>Filter form controls open by default</span>
<% end %>

With disabled visually hidden heading prefix (preview)

The heading text is prefixed with visually hidden text (“Filter by”) for screenreaders to make it more descriptive. In some circumstances, for example when the heading is already descriptive on its own like “Sort by”, this should be able to be disabled.

Some metadata field

Filter form controls 
<%= render "components/filter_section", {
  heading_text: "Some metadata field",
  disable_visually_hidden_heading_prefix: true
} do %>
  <span>Filter form controls</span>
<% end %>

Status text (preview)

Filter by Some metadata field

1 Selected
Filter form controls with status text 
<%= render "components/filter_section", {
  heading_text: "Some metadata field",
  status_text: "1 Selected"
} do %>
  <span>Filter form controls with status text</span>
<% end %>

Heading level (preview)

The heading level that the heading text will be rendered as.

Filter by Section heading is h3

Filter form controls 
<%= render "components/filter_section", {
  heading_text: "Section heading is h3",
  heading_level: 3
} do %>
  <span>Filter form controls</span>
<% end %>