GlobalSearch
@stellaria/nebula-webGlobalSearchPropsPreview
Props
14| Prop | Type | Default |
|---|---|---|
className | string | — |
debounce | number | 250 |
empty | ReactNode | — |
labels | Partial<GlobalSearchLabels> | — |
loading | boolean | false |
onOpenChange | ((opened: boolean) => void) | — |
onQueryChange required | (query: string) => void | — |
onSelect | ((result: GlobalSearchResult) => void) | — |
opened | boolean | — |
query | string | — |
recent | readonly GlobalSearchResult[] | — |
results required | readonly GlobalSearchResult[] | — |
withShortcut | boolean | true |
withTrigger | boolean | true |
Slot props
12Each one spreads over an inner element, so you can restyle a region without forking the component.
| Prop | Type | Default |
|---|---|---|
groupLabelProps The label of each group. It spreads over all of them. | TextSlotProps | — |
iconProps Icon wrapper. It lands on the magnifier AND on the icon of every result. | BoxSlotProps | — |
inputProps The search field, which is the `combobox`. | Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> | — |
listProps The result list, which is the `listbox`. | BoxSlotProps | — |
optionBodyProps Title and description column of each result. | BoxSlotProps | — |
optionDescriptionProps The description of each result, when it has one. | TextSlotProps | — |
optionProps Every result. It spreads over all of them; the active one carries `aria-selected`. | BoxSlotProps | — |
optionTitleProps The title of each result. | TextSlotProps | — |
searchRowProps The search field row, inside the panel. | BoxSlotProps | — |
shortcutProps The keyboard shortcut on the trigger. Only with `withShortcut`. | BoxSlotProps | — |
statusProps The no-results notice. Only rendered when there are none and it is not loading. | TextSlotProps | — |
triggerProps The button that opens the search. Only exists with `withTrigger`; turn it off if you open it from elsewhere. | Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> | — |
Also accepts
On top of its own props, this component forwards these groups.