combobox/usage

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Combobox textValue prop for custom items

When ComboboxItem renders JSX children instead of plain text, use the textValue prop to specify the text value for filtering and searching. Example: <ComboboxItem id={framework.value} textValue={framework.label}><span>{framework.label}</span></ComboboxItem>

Custom Combobox items example

Example of using custom items with textValue prop: type Framework = { label: string value: string } const frameworks: Framework[] = [ { label: "Next.js", value: "next" }, { label: "SvelteKit", value: "sveltekit" }, { label: "Nuxt", value: "nuxt" }, ] export function ExampleComboboxCustomItems() { return ( <Combobox allowsEmptyCollection> <ComboboxInput placeholder="Select a framework" /> <ComboboxContent> <ComboboxList renderEmptyState={() => ( <ComboboxEmpty>No items found.</ComboboxEmpty> )} items={frameworks} > {(framework) => ( <ComboboxItem id={framework.value} textValue={framework.label}> <span>{framework.label}</span> </ComboboxItem> )} </ComboboxList> </ComboboxContent> </Combobox> ) }

Combobox multiple selection example

Example of multiple selection with chips: const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"] export function ExampleComboboxMultiple() { const [value, setValue] = React.useState<string[]>([]) return ( <Combobox selectionMode="multiple" value={value} onChange={setValue} allowsEmptyCollection > <ComboboxChips> <ComboboxChipList<{ name: string }> {(value) => <ComboboxChip id={value.name}>{value.name}</ComboboxChip>} </ComboboxChipList> <ComboboxChipsInput placeholder="Add framework" /> </ComboboxChips> <ComboboxContent> <ComboboxList renderEmptyState={() => ( <ComboboxEmpty>No items found.</ComboboxEmpty> )} > {frameworks.map((item) => ( <ComboboxItem key={item} id={item}> {item} </ComboboxItem> ))} </ComboboxList> </ComboboxContent> </Combobox> ) }

Combobox import statement

Import the combobox components using: import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from '@/components/ui/combobox'

Combobox basic usage example

Basic combobox example with a list of frameworks: const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"] export function ExampleCombobox() { return ( <Combobox items={frameworks}> <ComboboxInput placeholder="Select a framework" /> <ComboboxContent> <ComboboxEmpty>No items found.</ComboboxEmpty> <ComboboxList> {(item) => ( <ComboboxItem key={item} value={item}> {item} </ComboboxItem> )} </ComboboxList> </ComboboxContent> </Combobox> ) }

Combobox custom items with objects example

Example of combobox with custom objects: import * as React from "react" import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@/components/ui/combobox" type Framework = { label: string value: string } const frameworks: Framework[] = [ { label: "Next.js", value: "next" }, { label: "SvelteKit", value: "sveltekit" }, { label: "Nuxt", value: "nuxt" }, ] export function ExampleComboboxCustomItems() { return ( <Combobox items={frameworks} itemToStringValue={(framework) => framework.label} > <ComboboxInput placeholder="Select a framework" /> <ComboboxContent> <ComboboxEmpty>No items found.</ComboboxEmpty> <ComboboxList> {(framework) => ( <ComboboxItem key={framework.value} value={framework}> {framework.label} </ComboboxItem> )} </ComboboxList> </ComboboxContent> </Combobox> ) }

Combobox imports

Import the following from @/components/ui/combobox: Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList. Additional imports for multi-select include: ComboboxChips, ComboboxValue, ComboboxChip, ComboboxChipsInput. Additional imports for groups include: ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxSeparator.

Basic combobox example

```tsx import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@/components/ui/combobox" const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"] export function ExampleCombobox() { return ( <Combobox items={frameworks}> <ComboboxInput placeholder="Select a framework" /> <ComboboxContent> <ComboboxEmpty>No items found.</ComboboxEmpty> <ComboboxList> {(item) => ( <ComboboxItem key={item} value={item}> {item} </ComboboxItem> )} </ComboboxList> </ComboboxContent> </Combobox> ) } ``` This example shows a basic combobox with a list of frameworks.

Combobox with custom items using itemToStringValue

```tsx import * as React from "react" import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@/components/ui/combobox" type Framework = { label: string value: string } const frameworks: Framework[] = [ { label: "Next.js", value: "next" }, { label: "SvelteKit", value: "sveltekit" }, { label: "Nuxt", value: "nuxt" }, ] export function ExampleComboboxCustomItems() { return ( <Combobox items={frameworks} itemToStringValue={(framework) => framework.label} > <ComboboxInput placeholder="Select a framework" /> <ComboboxContent> <ComboboxEmpty>No items found.</ComboboxEmpty> <ComboboxList> {(framework) => ( <ComboboxItem key={framework.value} value={framework}> {framework.label} </ComboboxItem> )} </ComboboxList> </ComboboxContent> </Combobox> ) } ``` This example shows how to use itemToStringValue when items are objects instead of strings.

Combobox multiple selection example

```tsx import * as React from "react" import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxValue, } from "@/components/ui/combobox" const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"] export function ExampleComboboxMultiple() { const [value, setValue] = React.useState<string[]>([]) return ( <Combobox items={frameworks} multiple value={value} onValueChange={setValue} > <ComboboxChips> <ComboboxValue> {value.map((item) => ( <ComboboxChip key={item}>{item}</ComboboxChip> ))} </ComboboxValue> <ComboboxChipsInput placeholder="Add framework" /> </ComboboxChips> <ComboboxContent> <ComboboxEmpty>No items found.</ComboboxEmpty> <ComboboxList> {(item) => ( <ComboboxItem key={item} value={item}> {item} </ComboboxItem> )} </ComboboxList> </ComboboxContent> </Combobox> ) } ``` This example demonstrates multiple selection using the multiple prop with chips.

Give your agent this brain