FilteredSearch

The FilteredSearch component helps style an ActionMenu and a TextInput side-by-side.

Deprecated
Not reviewed for accessibility

On this page

Note: You must use a TextInput and ActionMenu (or native <details> and <summary>) in order for this component to work properly.

Deprecation

A new filter component is in progress.

Until the new filter component is ready, you can use Button + TextInput + ActionList to reproduce this pattern.

Examples

<FilteredSearch>
  <ActionMenu>
    <ActionMenu.Button as="summary">Filter</ActionMenu.Button>
    <ActionMenu.Overlay>
      <ActionList>
        <ActionList.Item>Item 1</ActionList.Item>
        <ActionList.Item>Item 2</ActionList.Item>
        <ActionList.Item>Item 3</ActionList.Item>
      </ActionList>
    </ActionMenu.Overlay>
  </ActionMenu>
  <TextInput leadingVisual={SearchIcon} />
</FilteredSearch>

<FilteredSearch>
  <ActionMenu>
    <ActionMenu.Button as="summary">Filter</ActionMenu.Button>
    <ActionMenu.Overlay>
      <ActionList>
        <ActionList.Item>Item 1</ActionList.Item>
        <ActionList.Item>Item 2</ActionList.Item>
        <ActionList.Item>Item 3</ActionList.Item>
      </ActionList>
    </ActionMenu.Overlay>
  </ActionMenu>
  <TextInput leadingVisual={SearchIcon} />
</FilteredSearch>

Props

FilteredSearch

Name	Type	Default	Description
children	React.ReactNode		FilteredSearch is expected to contain an `ActionMenu` followed by a `TextInput`.
sx	SystemStyleObject		Style overrides to apply to the component. See also overriding styles.