Filters should be used to refine search results or to filter data in a table. They shouldn't be used like radio buttons or checkboxes, when the aim is for the user to choose an answer from a list.

Filters should always be in a fieldset with a legend for accesibility purposes. It is acceptable to visually hide the fieldset with the .sr-only css class.

Select year
Select years

Legends are used to provide context for multiple related inputs.

  • To use a legend, wrap your form inputs in a <fieldset> and set the <legend> as the first child.

  • By default the table caption is styled to match our standard body copy, but can be further styled by putting any of the text helper classes available on our typography page on the caption.

  • While some form elements's visual context can seem make a legend redundant, this may be less clear to users using screen reading devices. In this case an sr-only class can be used.