Components
VersionLoading…
Search dialog
Quick-pick modal with a search field over grouped results.
Use SearchDialog to choose one item from a list too long to scan, such as switching organization. It shares Dialog's modal behavior: focus moves to the search field, Tab stays inside, Escape or a click on the scrim closes it, and focus returns to the opener. Unlike Dialog it has no confirm step. Choosing a result is the action.
Usage
<SearchDialog
open={open}
onClose={() => setOpen(false)}
label="Switch organization"
searchLabel="Search organizations"
query={query}
onQueryChange={setQuery}
onSubmit={pickTopMatch}
empty={`No organization matches “${query}”.`}
>
<SearchDialogGroup heading="Recent">
<SearchDialogOption title="Codazen" description="owner" current onSelect={() => pick('codazen')} />
</SearchDialogGroup>
<SearchDialogGroup heading="All organizations · 12">
<SearchDialogOption title="Acme Rockets" description="member" onSelect={() => pick('acme')} />
</SearchDialogGroup>
</SearchDialog>The host owns filtering, grouping, ordering and recents. Pass no children to
show empty.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
open | boolean | — | Controlled visibility |
onClose | () => void | — | Escape, scrim click |
label | string | — | Names the dialog; also the search placeholder |
searchLabel | string | Search <label> | Names the search field |
query | string | — | Controlled search text |
onQueryChange | (query: string) => void | — | Called as the person types |
onSubmit | () => void | — | Enter in the search field, usually picks the top result |
placeholder | string | label | Search field placeholder |
empty | ReactNode | — | Shown when there are no children |
SearchDialogGroup takes heading and children. SearchDialogOption takes
title (also seeds the avatar initials), description, current (marks the
present choice with aria-current) and onSelect.