# Search
Search a searchbox text input with a menu.
Handle the case where dataset filtering needs to occur outside the combobox component.
## Import
```
Copyts
import { Search } from "@kobalte/core/search";
// or
import { Root, Label, ... } from "@kobalte/core/search";
```
```
Copyts
import { Search } from "@kobalte/core/search";
// or
import { Root, Label, ... } from "@kobalte/core/search";
```
## Features
- Inherits all the features of [combobox](https://kobalte.dev/docs/core/components/combobox), except result filtering which should be managed externally.
- Debouncing text input to rate limit search suggestions calls.
- Optional indicator to show when suggestions are loading.
## Anatomy
The search consists of:
- **Search:** The root container for a search component.
- **Search.Label:** The label that gives the user information on the search component.
- **Search.Description:** The description that gives the user more information on the component.
- **Search.Control:** Contains the search input and indicator.
- **Search.Indicator:** Wrapper for icon to indicate loading status.
- **Search.Icon:** A small icon often displayed next to the input as a visual affordance for the fact it can be open.
- **Search.Input:** The input used to search and reflects the selected suggestion values.
- **Search.Portal:** Portals its children into the `body` when the search is open.
- **Search.Content:** Contains the content to be rendered when the search is open.
- **Search.Arrow:** An optional arrow element to render alongside the search content.
- **Search.Listbox:** Contains a list of items and allows a user to search one or more of them.
- **Search.Section:** Used to render the label of an option group. It won't be focusable using arrow keys.
- **Search.Item:** An item of the search suggestion.
- **Search.ItemLabel:** An accessible label to be announced for the item.
- **Search.ItemDescription:** An optional accessible description to be announced for the item.
- **Search.NoResult:** Displayed when no suggestion options are given.
```
Copytsx
```
```
Copytsx
```
## Example
Magnifying Glass
Emoji selected:
index.tsxstyle.css
```
Copytsx
import { Search } from "@kobalte/core/search";
import { MagnifyingGlassIcon, ReloadIcon } from "some-icon-library";
import { createSignal } from "solid-js";
import "./style.css";
import { queryEmojiData } from "your-search-function";
function App() {
const [options, setOptions] = createSignal([]);
const [emoji, setEmoji] = createSignal();
return (
<>
setOptions(queryEmojiData(query))}
onChange={result => setEmoji(result)}
optionValue="name"
optionLabel="name"
placeholder="Search an emoji…"
itemComponent={props => (
{props.item.rawValue.emoji}
)}
>
}
>
e.preventDefault()}>
😬 No emoji found
Emoji selected: {emoji()?.emoji} {emoji()?.name}
)
}
```
```
Copytsx
import { Search } from "@kobalte/core/search";
import { MagnifyingGlassIcon, ReloadIcon } from "some-icon-library";
import { createSignal } from "solid-js";
import "./style.css";
import { queryEmojiData } from "your-search-function";
function App() {
const [options, setOptions] = createSignal([]);
const [emoji, setEmoji] = createSignal();
return (
<>
setOptions(queryEmojiData(query))}
onChange={result => setEmoji(result)}
optionValue="name"
optionLabel="name"
placeholder="Search an emoji…"
itemComponent={props => (
{props.item.rawValue.emoji}
)}
>
}
>
e.preventDefault()}>
😬 No emoji found
Emoji selected: {emoji()?.emoji} {emoji()?.name}
)
}
```
## Usage
### Debounce
Set `debounceOptionsMillisecond`, to prevent new search queries immediately on input change. Instead, search queries are requested once input is idle for a set time.
Show a debouncing icon by adding a `loadingComponent` to `Search.Indicator`.
Magnifying Glass
Emoji selected:
```
Copytsx
setOptions(queryEmojiData(query))}
onChange={result => setEmoji(result)}
debounceOptionsMillisecond={300}
optionValue="name"
optionLabel="name"
placeholder="Search an emoji…"
itemComponent={(props: any) => (
{props.item.rawValue.emoji}
)}
>
}
>
e.preventDefault()}>
😬 No emoji found
```
```
Copytsx
setOptions(queryEmojiData(query))}
onChange={result => setEmoji(result)}
debounceOptionsMillisecond={300}
optionValue="name"
optionLabel="name"
placeholder="Search an emoji…"
itemComponent={(props: any) => (
{props.item.rawValue.emoji}
)}
>
}
>
e.preventDefault()}>
😬 No emoji found
```
### Inline style
To achieve the command menu look, add the `open` prop to permanently open dropdown. Replace `Search.Portal` and `Search.Content` with a `div` to directly mount your content below the search input.
Magnifying Glass
😬 No emoji found
Emoji selected:
```
Copytsx
setOptions(queryEmojiData(query))}
onChange={result => setEmoji(result)}
debounceOptionsMillisecond={300}
optionValue="name"
optionLabel="name"
placeholder="Search an emoji…"
itemComponent={(props: any) => (
{props.item.rawValue.emoji}
)}
>
😬 No emoji found
```
```
Copytsx
setOptions(queryEmojiData(query))}
onChange={result => setEmoji(result)}
debounceOptionsMillisecond={300}
optionValue="name"
optionLabel="name"
placeholder="Search an emoji…"
itemComponent={(props: any) => (
{props.item.rawValue.emoji}
)}
>
😬 No emoji found
```
## API Reference
### Search
`Search` is equivalent to the `Root` import from `@kobalte/core/search`.
| Prop | Description |
| --- | --- |
| options | `Array`
An array of options to display as the available options. |
| optionValue | `keyof T | ((option: T) => string | number)`
Property name or getter function to use as the value of an option. This is the value that will be submitted when the search component is part of a `