On this page

FilteredSearch

Use filtered search component helps style an ActionMenu and a TextInput side-by-side.

Alpha
Not reviewed for accessibility

On this page

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

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

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.

Edit this page on GitHub

1 contributor

Last edited by colebemis on January 24, 2023