ExposedFilters

import { ExposedFilters } from '@uhg-abyss/web/ui/ExposedFilters';

useExposedFilters

Using ExposedFilters requires the useExposedFilters hook to manage the filter and sort state as well as the filtered data.

The useExposedFilters hook accepts the following parameters:

data: An array of data items to be filtered and sorted.
filters: An array of filter configurations, each defining a filter's label, value, options, predicate, and type.
filterMode: The mode of filtering, either 'real-time' or 'batch'.
showMatchCount: A boolean indicating whether to show the count of matching items for each filter option.
sortOptions: An optional array of sort option configurations, each defining a sort option's label, value, and comparator.

Note: When using TypeScript, the component and hook will infer the type of the data items from the data parameter.

The useExposedFilters hook returns an object with the following properties:

filteredData: The array of data items that match the selected filters (sorted by the selected sort option, if applicable).
filterState: The current state of the filters, including selected options and methods to update them.
sortState: The current state of the sorting, including the selected sort option and methods to update it.

ExposedFilters needs the filterState and sortState values to function correctly. filteredData can be used to render the filtered and sorted data items however you need.

Filtering

ExposedFilters supports three types of filters: simple filters, date filters, and date range filters.

Behavior

Within an individual filter, options are combined in a disjunctive manner (OR). This means that items from data that match any of the selected options will be returned in filteredData. Note that this only applies to filters of type 'multiple', as filters of type 'single' can only have one selected option at a time.

Between different filters, the filtering is done in a conjunctive manner (AND). This means that only items from data that match the selected options from all filters will be returned in filteredData.

Simple filters

A simple filter allows users to select one or more options from a list. The filter must have a type value as well as an options array. The two possible type values are:

'single': Allows users to select only one option at a time.
'multiple': Allows users to select multiple options.

const { filteredData, ...exposedFiltersProps } = useExposedFilters({
  // ...
  filters: [
    {
      type: 'single',
      options: [
        // ...
      ],
    },
    {
      type: 'multiple',
      options: [
        // ...
      ],
    },
  ],
  // ...
});

Each option has the following properties:

label: The display label for the option.
value: The unique value for the option.
predicate: A function that takes a data item and returns a boolean indicating whether the item matches the option.
selected: An optional boolean indicating whether the option is selected. This is managed by the useExposedFilters hook, but can be used to set a default selection if needed.

const { filteredData, ...exposedFiltersProps } = useExposedFilters({
  // ...
  filters: [
    {
      type: 'multiple',
      options: [
        {
          label: 'Option 1',
          value: 'option-1',
          predicate: (item) => item.property1 === 'value1',
        },
        {
          label: 'Option 2',
          value: 'option-2',
          predicate: (item) => item.property1 === 'value2',
        },
        // ...
      ],
    },
    {
      type: 'single',
      options: [
        {
          label: 'Option A',
          value: 'option-a',
          predicate: (item) => item.property2 === 'valueA',
        },
        {
          label: 'Option B',
          value: 'option-b',
          predicate: (item) => item.property2 === 'valueB',
        },
        // ...
      ],
    },
  ],
  // ...
});

Options can also be grouped into sections by providing a section property with an array of options.

const { filteredData, ...exposedFiltersProps } = useExposedFilters({
  // ...
  filters: [
    {
      type: 'multiple',
      options: [
        {
          section: 'Group 1',
          options: [
            {
              label: 'Option 1',
              value: 'option-1',
              predicate: (item) => item.property1 === 'value1',
            },
            {
              label: 'Option 2',
              value: 'option-2',
              predicate: (item) => item.property1 === 'value2',
            },
          ],
        },
        {
          section: 'Group 2',
          options: [
            {
              label: 'Option 3',
              value: 'option-3',
              predicate: (item) => item.property1 === 'value3',
            },
            {
              label: 'Option 4',
              value: 'option-4',
              predicate: (item) => item.property1 === 'value4',
            },
          ],
        },
      ],
    },
  ],
  // ...
});

Each filter dropdown contains a search input by default, allowing users to search for options by label. This can be disabled with the hideFilterSearch prop. This search input is also displayed within the all filters drawer, regardless of the hideFilterSearch value. Note that within the drawer, the search input ignores date filters and date range filters since these filters do not have options.

Simple filter example

Date filters

Day.js

Date filters and date range filters rely on the Day.js library to handle date operations. The predicate functions for these filters receive Day.js objects as filter values.

Abyss includes a Day.js tool, which includes a number of preset Day.js plugins, but you can also install Day.js separately.

import { dayjs } from '@uhg-abyss/web/tools/dayjs';

Configuration

A date filter allows users to select a specific date. The filter must have a type value of 'date' and a predicate function that accepts the item to compare and the selected date as a Day.js object.

The example below shows a date filter that matches items whose dateProperty value matches the selected filterValue. It is strongly recommended to compare dates to the day, since the interface for date filters allows users to select a single day. Comparing other units of time, such as months or years, may lead to confusion.

const { filteredData, ...exposedFiltersProps } = useExposedFilters({
  // ...
  filters: [
    {
      type: 'date',
      predicate: (item, filterValue) => {
        const parsedItemDate = dayjs(item.dateProperty, dateFormat, true);

        if (!parsedItemDate.isValid()) {
          return false;
        }

        return parsedItemDate.isSame(filterValue, 'day');
      },
    },
  ],
  // ...
});

The date filter can also accept an optional selectedDate property. This is managed by the useExposedFilters hook, but can be used to set a default date if needed.

Date filter example

Date input config

Date filters accept an optional dateInputConfig property, which allows you to customize the underlying DateInput component used in the filter UI. This is an object that can accept any of the following properties from the DateInput component:

errorMessage
excludeDate
helper
hidePlaceholder
highlighted
inputLeftElement
maxDate
minDate
onBlur
onChange
onClear
onFocus
onMonthChange
onPaste
subText
successMessage

Note: While most of these remain unchanged, since the value of the input is controlled by ExposedFilters internally, the errorMessage and successMessage properties are provided as functions that receive the current raw input string (or undefined) and return a string (the message to display) or undefined. If needed, parse the raw value manually.

Note: The dateFormat property is not supported here, since it is already provided by the useExposedFilters hook (See Date format below). This is to ensure that all date and date range filters use the same format for consistency.

Date range filters

A date range filter allows users to select a range of dates. The filter must have a type value of 'date-range' and a predicate function that accepts the item to compare and the selected dates as an object of the following type:

{
  start: Dayjs;
  end: Dayjs;
}

Note: This predicate function is only called when both a valid start and end date have been selected, so the start and end values will always be defined.

The example below shows a date range filter that matches items whose dateProperty value is between the selected filterValue dates (inclusive). It is strongly recommended to compare dates to the day, since the interface for date range filters allows users to select two days. Comparing other units of time, such as months or years, may lead to confusion.

See the Day.js documentation for more information on the isBetween method.

const { filteredData, ...exposedFiltersProps } = useExposedFilters({
  // ...
  filters: [
    {
      type: 'date-range',
      predicate: (item, filterValue) => {
        const parsedItemDate = dayjs(item.dateProperty, dateFormat, true);

        if (!parsedItemDate.isValid()) {
          return false;
        }

        return parsedItemDate.isBetween(
          filterValue.start,
          filterValue.end,
          'day',
          '[]'
        );
      },
    },
  ],
  // ...
});

Date range filter example

Date input range config

Date range filters accept an optional dateInputRangeConfig property, which allows you to customize the underlying DateInputRange component used in the filter UI. This is an object that can accept any of the following properties from the DateInputRange component:

errorMessage
excludeDate
fromFieldConfig
hidePlaceholders
highlighted
maxDate
minDate
onBlur
onChange
onClear
onFocus
successMessage
toFieldConfig

Note: While most of these remain unchanged, since the value of the inputs is controlled by ExposedFilters internally, the errorMessage and successMessage properties are provided as functions that receive raw values only. At the root level, callbacks receive an object with { from, to } input strings. Within fromFieldConfig and toFieldConfig, callbacks receive the corresponding field's raw input string. If you need parsed dates, parse the raw values manually.

Date format

Use the dateFormat parameter to specify the format of the date displayed in the date and date range inputs as well as the active filter chips. The default format is 'MM/DD/YYYY'.

Note: The format must be compatible with the Day.js library. Due to the input mask used, DateInput does not support any substrings that would require non-numeric characters. Of the available formatting substrings, only the following are supported:

Format	Description
`'YY'`	Two-digit year
`'YYYY'`	Four-digit year
`'M'`	The month, beginning at 1
`'MM'`	The month, 2-digits
`'D'`	The day of the month
`'DD'`	The day of the month, 2-digits
`'d'`	The day of the week, with Sunday as 0

const { filteredData, ...exposedFiltersProps } = useExposedFilters({
  // ...
  dateFormat: 'DD.MM.YYYY',
  filters: [
    {
      type: 'date',
      predicate: (item, filterValue) => {
        const parsedItemDate = dayjs(item.dateProperty, dateFormat, true);

        if (!parsedItemDate.isValid()) {
          return false;
        }

        return parsedItemDate.isSame(filterValue, 'day');
      },
    },
  ],
  // ...
});

Sorting

To enable sorting, provide the sortOptions parameter to the useExposedFilters hook. Each sort option has the following properties:

label: The display label for the sort option.
value: The unique value for the sort option.
comparator: A function that takes two data items and returns a number indicating their sort order.
selected: An optional boolean indicating whether the sort option is selected. This is managed by the useExposedFilters hook, but can be used to set a default selection if needed.

By default, the first sort option in the array is selected.

const { filteredData, ...exposedFiltersProps } = useExposedFilters({
  // ...
  sortOptions: [
    {
      label: 'Option A',
      value: 'option-a',
      comparator: (a, b) => a.stringProperty.localeCompare(b.stringProperty),
    },
    {
      label: 'Option B',
      value: 'option-b',
      comparator: (a, b) => b.numberProperty - a.numberProperty,
    },
  ],
  // ...
});

Filter mode

The filterMode parameter controls when filtering and sorting selections are applied to the data. It can be set to either 'real-time' or 'batch'. By default, it is set to 'real-time', meaning that changes to the filtering or sorting selections will be applied to the data immediately and the filteredData value will be updated accordingly. When set to 'batch', changes to the filtering or sorting selections will not be applied to the data until the user clicks the "Apply" button in the dropdown.

Note: The filterMode value only affects the dropdowns. The all filters drawer will always operate in batch mode, as updating a window behind a modal is considered a poor user experience.

Show match count

Set the showMatchCount parameter to true to display the number of matching items next to each filter option in the dropdowns and drawer. This count considers all applied filters and is updated in real-time as users select or deselect filter options, providing immediate feedback on how many items would be displayed if a given option were to be applied.

Note: As date and date range filters do not have predefined options, match counts are not displayed for these filter types.

Hide filter search

By default, each simple filter dropdown will contain a search input to help users find filter options. These search inputs can be hidden by setting the hideFilterSearch prop to true.

Note: This prop only affects simple filter dropdowns. The all filters drawer, as well as date and date range filters, will always contain their respective input fields. The sort dropdown, if present, never contains a search input.

() => {
  const { filteredData, ...exposedFiltersProps } = useExposedFilters({
    // ...
  });

  return (
    <ExposedFilters {...exposedFiltersProps} hideFilterSearch />;
  )
}

Custom content

ExposedFilters allows you to insert custom content in a few different locations.

Use the topContent and bottomContent values of a simple filter to render custom content at the top or bottom of that filter's menu UI.

Note: Date and date range filters do not support custom menu content. See the Date input config and Date input range config sections for information on how to add custom content to those filter types.

No options content

Use the noOptionsContent prop to render custom content above the "No results" text in the filter dropdowns and the all filters drawer.

The skipToSelector prop is required for accessibility. When the list of applied filter chips is long, it can be tedious for keyboard and screen reader users to navigate through them to reach the filtered data. When that list is too long, a SkipLink will be added before the filter chips that allows users to skip directly to the filtered content. This prop must be a selector that targets the first element in the filtered content, such as the first card in these examples. See SkipLink's Targeting elements section for more details.

const { filteredData, ...exposedFiltersProps } = useExposedFilters({
  // ...
});

const firstCardId = useAbyssId();

return (
  <Layout.Stack alignItems="left" grow>
    <ExposedFilters
      {...exposedFiltersProps}
      skipToSelector={`#${firstCardId}`}
    />
    <Grid>
      {filteredData.map((employee, i) => {
        return (
          <Grid.Col key={employee.name} span={{ xs: 12, md: 6 }}>
            <Card
              id={i === 0 ? firstCardId : undefined}
              // ...
            />
          </Grid.Col>
        );
      })}
    </Grid>
  </Layout.Stack>
);

An additional SkipLink will automatically be inserted if there are more than 5 filter dropdowns and any filters are applied. This prevents users from needing to tab through a long list of filters to reach the chips to clear the filters or the filtered content. This SkipLink is managed automatically by ExposedFilters and does not require a skipToSelector prop to function.

Responsiveness

On screens less than 744px wide, the filter dropdowns will be hidden and the all filters drawer button expanded. The sort dropdown, if present, will remain visible. Resize the window to see the change!

ExposedFilters Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties \| Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	false	-	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
filterState	FilterState	-		The state of the filters. Usually the result of the useExposedFilters hook.
hideFilterSearch	boolean	false	-	If true, the filter dropdown menu will not display a search input
noOptionsContent	React.ReactNode	-	-	Custom content to display when there are no filter options available.
skipToSelector	string \| (() => HTMLElement \| null) \| undefined	-		Selector for skip link to focus when activated.
sortState	SortState	-	-	The state of the sort options. Usually the result of the useExposedFilters hook.

ExposedFilters Classes

Class Name	Description
.abyss-exposed-filters-root	ExposedFilters root element
.abyss-exposed-filters-sort-wrapper	ExposedFilters sort wrapper element
.abyss-exposed-filters-filters-wrapper	ExposedFilters filters wrapper element
.abyss-exposed-filters-skip-link	ExposedFilters "skip to applied filters" link element
.abyss-exposed-filters-filter-drawer-button	ExposedFilters filter drawer button element
.abyss-exposed-filters-filter-list	ExposedFilters filter list element
.abyss-exposed-filters-filter-dropdown	ExposedFilters filter dropdown element
.abyss-exposed-filters-sort-dropdown	ExposedFilters sort dropdown element
.abyss-exposed-filters-applied-filters-wrapper	ExposedFilters applied filters wrapper element
.abyss-exposed-filters-applied-filters	ExposedFilters applied filters list element
.abyss-exposed-filters-clear-filters-button-wrapper	ExposedFilters clear filters button wrapper element
.abyss-exposed-filters-clear-filters-button	ExposedFilters clear filters button
.abyss-exposed-filters-applied-filter-chip-wrapper	ExposedFilters applied filter chip wrapper element
.abyss-exposed-filters-applied-filter-chip	ExposedFilters applied filter chip element
.abyss-exposed-filters-dropdown-trigger	ExposedFilters dropdown trigger element
.abyss-exposed-filters-dropdown-trigger-label	ExposedFilters dropdown trigger label element
.abyss-exposed-filters-dropdown-trigger-icon	ExposedFilters dropdown trigger icon element
.abyss-exposed-filters-dropdown-portal-container	ExposedFilters dropdown portal container element
.abyss-exposed-filters-dropdown-dismissable-layer	Dismissible layer for simple filter dropdowns
.abyss-exposed-filters-dropdown-menu-container	Root container for dropdown menu content
.abyss-exposed-filters-dropdown-options-container	ExposedFilters dropdown options container element
.abyss-exposed-filters-dropdown-selection-menu	ExposedFilters dropdown selection menu element
.abyss-exposed-filters-dropdown-footer	ExposedFilters dropdown footer element
.abyss-exposed-filters-dropdown-apply-button	ExposedFilters dropdown apply button element
.abyss-exposed-filters-dropdown-date-input	ExposedFilters dropdown date input element
.abyss-exposed-filters-dropdown-clear-button	ExposedFilters dropdown clear button element
.abyss-exposed-filters-dropdown-search	ExposedFilters dropdown search element
.abyss-exposed-filters-dropdown-top-content	ExposedFilters dropdown top content element
.abyss-exposed-filters-dropdown-no-options-container	ExposedFilters dropdown no options container element
.abyss-exposed-filters-dropdown-bottom-content	ExposedFilters dropdown bottom content element
.abyss-exposed-filters-drawer	ExposedFilters drawer root element
.abyss-exposed-filters-drawer-footer	ExposedFilters drawer footer element
.abyss-exposed-filters-drawer-view-button	ExposedFilters drawer view button element
.abyss-exposed-filters-drawer-clear-all-button	ExposedFilters drawer clear all button element
.abyss-exposed-filters-search-wrapper	ExposedFilters search wrapper element
.abyss-exposed-filters-drawer-no-options-container	ExposedFilters drawer no options container element
.abyss-exposed-filters-drawer-no-options-text	ExposedFilters drawer no options text element
.abyss-exposed-filters-drawer-accordion	ExposedFilters drawer accordion element
.abyss-exposed-filters-drawer-accordion-item	ExposedFilters drawer accordion item element
.abyss-exposed-filters-drawer-accordion-header	ExposedFilters drawer accordion header element
.abyss-exposed-filters-drawer-accordion-content	ExposedFilters drawer accordion content element
.abyss-exposed-filters-drawer-accordion-clear-button	ExposedFilters drawer accordion clear button element
.abyss-exposed-filters-applied-filters	ExposedFilters applied filters element
.abyss-exposed-filters-applied-filter-chip	ExposedFilters applied filter chip element
.abyss-exposed-filters-drawer-top-content	ExposedFilters drawer custom top content wrapper element
.abyss-exposed-filters-drawer-selection-menu	ExposedFilters drawer selection menu element
.abyss-exposed-filters-drawer-bottom-content	ExposedFilters drawer custom bottom content wrapper element
.abyss-exposed-filters-fieldset	Fieldset wrapper for accessible grouping of filter options
.abyss-exposed-filters-menu-option-list-container	Container for all options in filter UI
.abyss-exposed-filters-menu-section-list	List of section options in filter option list
.abyss-exposed-filters-menu-option-heading	Section header in filter option list
.abyss-exposed-filters-menu-option	Individual option in filter option list
.abyss-exposed-filters-section-top-content-wrapper	Wrapper for custom top content in a filter section
.abyss-exposed-filters-section-bottom-content-wrapper	Wrapper for custom bottom content in a filter section
.abyss-exposed-filters-section-content-wrapper	Wrapper for custom content (top and bottom) in a filter section
.abyss-exposed-filters-dropdown-date-input	ExposedFilters dropdown date input element
.abyss-exposed-filters-dropdown-footer	ExposedFilters dropdown footer element
.abyss-exposed-filters-dropdown-apply-button	ExposedFilters dropdown apply button element
.abyss-exposed-filters-dropdown-clear-button	ExposedFilters dropdown clear button element
.abyss-exposed-filters-filter-search-root	ExposedFilters filter search root element
.abyss-exposed-filters-filter-search-input-wrapper	ExposedFilters filter search input wrapper element
.abyss-exposed-filters-filter-search-icon-wrapper	ExposedFilters filter search icon wrapper element
.abyss-exposed-filters-filter-search-input	ExposedFilters filter search input element
.abyss-exposed-filters-filter-search-clear-button	ExposedFilters filter search clear button element

ExposedFilters structure diverges from obvious ARIA standards

Each individual exposed filter is a simple button labeling the filter (and setting count) and opens a small dialog box that looks like a combobox. The first field in the dialog is a SelectInput (multi or single), followed by "Apply" (batch mode) and "Clear" buttons. There are minor differences between the ExposedFilters presentation of these components and the ARIA standards, the most significant being the use of radio buttons instead of a checkmark to indicate a single selection.

Hybrid single-selection operation

In the case of the sort button and hideFilterSearch (where there is no textbox option filter search), the operation only displays the listbox. This changes the <button> into a combobox that extends into a dialog with the buttons. This results in the unusual case where a simple combobox, like a select menu, is blended with added buttons.

Multi-selection keyboard operation change

Keyboard operation has also been slightly altered to handle multiple selections in ExposedFilters and SelectInput (Multi). In previous versions of SelectInput (Multi), option selection was toggled using Enter to allow space bar to enter spaces in the textbox (for options like "New York"). When tested in the context of ExposedFilters, the existing issues with this became more apparent.

The introduction of ExposedFilters updates SelectInput (Multi) to use space bar and Enter in the more traditional action roles instead of text editing. This provides a more intuitive visual operation given the use of checkboxes and radio buttons.

Space bar - selection only (in most cases)

Multi-selection
- Toggles current selection "checkbox"
- Does not close dialog
Single-selection
- SelectInput
  - Makes selection
  - Closes menu
- ExposedFilters
  - Sets radio button (selection)
  - When using filterMode="real-time" (the default), this closes the dialog to follow select menu operation
Shift + Space: insert space into textbox
- This key combination restores the ability to enter values like "New York" into the combobox textbox filter

Pressing Enter has the same effect as space bar in all cases but always closes the dialog or menu.

All filters drawer

The All Filters button opens a standard drawer (dialog). The contents are mostly accordions for each of the individual filters. Though similar in appearance to the main filters, these are HTML standard checkbox and radio button groups.

Buttons (Closed) Keyboard Interactions

Key	Description
Enter / Space / Up Arrow / Down Arrow	Opens the dialog, sets focus in combobox

Dialog Focus Keyboard Interactions

Key	Description
Tab	Moves focus forward (combobox > (X) Clear textbox, if displayed > Apply (in batch mode) > Clear > combobox)
Shift + Tab	Moves focus backward (combobox > Clear > Apply (in batch mode) > combobox)
Esc	Closes dialog/menu. Sets focus on filter button.

Listbox Keyboard Interactions

Key	Description
Space	Toggles the currently highlighted checkbox (Multi)/selects radio (Single). Closes ONLY single dialog/listbox, sets focus on filter button.
Enter	Toggles the currently highlighted checkbox (Multi)/selects radio (Single). Closes both single and multi dialog/listbox, sets focus on filter button.
Esc	Closes dialog/menu. Sets focus on filter button.
Down Arrow	Moves visual focus to the next option.
Up Arrow	Moves visual focus to the previous option.
Home	When hideFilterSearch is true, moves focus to the first option in the listbox. Otherwise, moves editing cursor to start of textbox
End	When hideFilterSearch is true, moves focus to the last option in the listbox. Otherwise, moves editing cursor to end of textbox

Search (When Focused) Keyboard Interactions

Key	Description
Printable characters	Inserts character into textbox, updates listbox, highlighting matches, if any
Shift + Space	Inserts space character into textbox
Backspace	Deletes character to left of editing cursor
Delete	Deletes character to right of editing cursor
Right Arrow	Moves editing cursor one character to the right
Left Arrow	Moves editing cursor one character to the left
Home	Moves editing cursor to start of textbox
End	Moves editing cursor to end of textbox

Known BrAT (Screen Reader) Issues

VoiceOver (MacOS) does not correctly announce combobox/listbox status
- When expanded, combobox operation does not announce listbox selection or status
- These issues match those in WAI-ARIA Editable Combobox without Autocomplete Example
Un-searchable variant
- Unlike searchable variant, NVDA does not announce "not selected" when options receive keyboard focus
- JAWS correctly announced "not selected" for both variants

Component Tokens

Note: Click on the token row to copy the token to your clipboard.

Search tokens

ExposedFilters Tokens

Token Name	Value
exposed-filters.color.border.dropdown.container	#CBCCCD
exposed-filters.color.border.dropdown.footer	#CBCCCD
exposed-filters.color.border.horizontal-scroll-alt.active	#323334
exposed-filters.color.border.horizontal-scroll-alt.hover	#4B4D4F
exposed-filters.color.border.horizontal-scroll-alt.rest	#7D7F81
exposed-filters.color.border.filter-button.default.active	#323334
exposed-filters.color.border.filter-button.default.hover	#4B4D4F
exposed-filters.color.border.filter-button.default.rest	#7D7F81
exposed-filters.color.border.filter-button.selected.active	#002677
exposed-filters.color.border.filter-button.selected.hover	#004BA0
exposed-filters.color.border.filter-button.selected.rest	#196ECF
exposed-filters.color.border.search-wrapper	#CBCCCD
exposed-filters.color.icon.button	#196ECF
exposed-filters.color.icon.filter-button.active	#002677
exposed-filters.color.icon.filter-button.hover	#004BA0
exposed-filters.color.icon.filter-button.rest	#196ECF
exposed-filters.color.surface.dropdown	#FFFFFF
exposed-filters.color.surface.horizontal-scroll-alt.active	#E5E5E6
exposed-filters.color.surface.horizontal-scroll-alt.hover	#F3F3F3
exposed-filters.color.surface.horizontal-scroll-alt.rest	#FFFFFF
exposed-filters.color.surface.filter-button.default.active	#E5E5E6
exposed-filters.color.surface.filter-button.default.hover	#F3F3F3
exposed-filters.color.surface.filter-button.default.rest	#FFFFFF
exposed-filters.color.surface.filter-button.selected.active	#D9E9FA
exposed-filters.color.surface.filter-button.selected.hover	#E3EEFA
exposed-filters.color.surface.filter-button.selected.rest	#EDF3FB
exposed-filters.color.surface.divider	#4B4D4F
exposed-filters.color.text.button	#323334
exposed-filters.border-radius.all.dropdown	4px
exposed-filters.border-radius.all.filter-button	500px
exposed-filters.border-width.all.dropdown	1px
exposed-filters.border-width.all.filter-button	1px
exposed-filters.border-width.bottom.search-wrapper	1px
exposed-filters.border-width.top.dropdown.footer	1px
exposed-filters.sizing.all.icon.utility	24px
exposed-filters.spacing.gap.horizontal.applied-filters	8px
exposed-filters.spacing.gap.horizontal.drawer.footer	16px
exposed-filters.spacing.gap.horizontal.dropdown.footer	12px
exposed-filters.spacing.gap.horizontal.filters	16px
exposed-filters.spacing.gap.horizontal.filter-button	8px
exposed-filters.spacing.gap.horizontal.sort.mobile	16px
exposed-filters.spacing.gap.horizontal.sort.web	32px
exposed-filters.spacing.gap.vertical.container.mobile	16px
exposed-filters.spacing.gap.vertical.container.web	12px
exposed-filters.spacing.gap.vertical.dropdown.no-options	16px
exposed-filters.spacing.padding.all.applied-filters.drawer	12px
exposed-filters.spacing.padding.all.dropdown.no-options	16px
exposed-filters.spacing.padding.all.dropdown.date-input	16px
exposed-filters.spacing.padding.horizontal.dropdown.footer	16px
exposed-filters.spacing.padding.horizontal.filter-button	16px
exposed-filters.spacing.padding.horizontal.search-wrapper	16px
exposed-filters.spacing.padding.vertical.accordion-content	8px
exposed-filters.spacing.padding.vertical.dropdown.menu-content	8px
exposed-filters.spacing.padding.vertical.dropdown.footer	8px
exposed-filters.spacing.padding.vertical.filter-button	8px
exposed-filters.spacing.padding.vertical.search-wrapper	8px
exposed-filters.elevation.dropdown	0px 2px 4px -2px rgba(0,0,0,0.16)

useExposedFilters​

Filtering​

Behavior​

Simple filters​

Simple filter example​

Date filters​

Day.js​

Configuration​

Date filter example​

Date input config​

Date range filters​

Date range filter example​

Date input range config​

Date format​

Sorting​

Filter mode​

Show match count​

Hide filter search​

Custom content​

Menu content​

No options content​

Skip to selector​

Responsiveness​