On this page

FilterList

Use filter list component as a menu with filter options that filter the main content of the page.

Alpha
Not reviewed for accessibility

On this page

The FilterList component is a menu with filter options that filter the main content of the page.

Examples

<FilterList>
  <FilterList.Item selected count={32} href="#foo">
    First Filter
  </FilterList.Item>
  <FilterList.Item count={2} href="#bar">
    Second Filter
  </FilterList.Item>
  <FilterList.Item href="#baz">Third Filter</FilterList.Item>
</FilterList>

<FilterList>
  <FilterList.Item selected count={32} href="#foo">
    First Filter
  </FilterList.Item>
  <FilterList.Item count={2} href="#bar">
    Second Filter
  </FilterList.Item>
  <FilterList.Item href="#baz">Third Filter</FilterList.Item>
</FilterList>

Props

Name	Type	Default	Description
sx	SystemStyleObject		Style overrides to apply to the component. See also overriding styles.

FilterList.Item

Name	Type	Default	Description
count	number		Number to be displayed in the list item
selected	boolean		Whether the list item is selected or not
small	boolean	false	Whether the list item is small or not
as	React.ElementType	'a'	The underlying element to render — either a HTML element name or a React component.
sx	SystemStyleObject		Style overrides to apply to the component. See also overriding styles.

Edit this page on GitHub

1 contributor

Last edited by colebemis on January 24, 2023