Filters a list of options as the user types.
import { Combobox } from "@/fragments/ui";Source<StatefulCombobox placeholder="Select a fruit">
<Combobox.Input />
<Combobox.Content>
<Combobox.Item value="apple">Apple</Combobox.Item>
<Combobox.Item value="banana">Banana</Combobox.Item>
<Combobox.Item value="orange">Orange</Combobox.Item>npx @usefragments/cli add comboboxWrites src/fragments/ui/components/Combobox plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.
Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.
Combobox is a compound: import the root and reach its parts through dot notation.
Combobox.InputCombobox.TriggerCombobox.ContentCombobox.ItemCombobox.ItemIndicatorCombobox.EmptyCombobox.GroupCombobox.GroupLabelType to narrow the list; unmatched queries show a no-results row.
<StatefulCombobox placeholder="Select a fruit">
<Combobox.Input />
<Combobox.Content>
<Combobox.Item value="apple">Apple</Combobox.Item>
<Combobox.Item value="banana">Banana</Combobox.Item>
<Combobox.Item value="orange">Orange</Combobox.Item>
<Combobox.Item value="grape">Grape</Combobox.Item>
</Combobox.Content>
</StatefulCombobox>Each pick becomes a removable chip in the field.
<StatefulCombobox multiple placeholder="Select fruits...">
<Combobox.Input />
<Combobox.Content>
<Combobox.Item value="apple">Apple</Combobox.Item>
<Combobox.Item value="banana">Banana</Combobox.Item>
<Combobox.Item value="orange">Orange</Combobox.Item>Helper text tells the user the field is searchable.
<StatefulCombobox
label="Assignee"
placeholder="Search assignees..."
helperText="Type to filter the list of available assignees."
>
<Combobox.Input />Red border, and the message replaces helper text.
<Combobox
label="Reviewer"
placeholder="Search reviewers..."
error="Please select a reviewer"
>
<Combobox.Input />Headed sections stay intact while filtering.
<StatefulCombobox placeholder="Search countries...">
<Combobox.Input />
<Combobox.Content>
<>
<Combobox.Group>
<Combobox.GroupLabel>North America</Combobox.GroupLabel>Combobox.Empty replaces the default no-results wording.
<StatefulCombobox placeholder="Filter languages...">
<Combobox.Input />
<Combobox.Content>
<Combobox.Empty>No language matches that search</Combobox.Empty>
<Combobox.Item value="js">JavaScript</Combobox.Item>
<Combobox.Item value="ts">TypeScript</Combobox.Item>Caps at four rows and half-shows the fifth as a scroll hint.
<StatefulCombobox placeholder="Search languages...">
<Combobox.Input />
<Combobox.Content>
<Combobox.Empty>No results found</Combobox.Empty>
<Combobox.Item value="js">JavaScript</Combobox.Item>
<Combobox.Item value="ts">TypeScript</Combobox.Item>maxVisibleItems raises the cap to six rows.
<StatefulCombobox placeholder="Search cities...">
<Combobox.Input />
<Combobox.Content maxVisibleItems={6}>
<Combobox.Empty>No results found</Combobox.Empty>
<Combobox.Item value="nyc">New York</Combobox.Item>
<Combobox.Item value="lon">London</Combobox.Item>Dimmed and unfocusable.
<Combobox disabled placeholder="Search...">
<Combobox.Input />
<Combobox.Content>
<Combobox.Item value="1">Option 1</Combobox.Item>
</Combobox.Content>
</Combobox>showTrigger={false} hands the open control to your own Combobox.Trigger.
<StatefulCombobox placeholder="Search assignees...">
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<Combobox.Input showTrigger={false} />
<Combobox.Trigger aria-label="Open assignee list" />
</div>
<Combobox.Content>Prop | Type | Default | Description |
|---|---|---|---|
multiple | boolean | false | Allow multiple selections with chips |
value | union | Not set | Controlled selected value (string for single, string[] for multiple) |
defaultValue | union | Not set | Default selected value (uncontrolled) |
onValueChange | union | Not set | Called when selection changes |
onChange | union | Not set | Alias for onValueChange |
childrenRequired | node | Not set | Combobox input and content |
open | boolean | Not set | Controlled open state of the dropdown |
defaultOpen | boolean | false | Initial open state for uncontrolled usage |
onOpenChange | function | Not set | Called when dropdown open state changes |
required | boolean | Not set | — |
name | string | Not set | — |
placeholder | string | Not set | Placeholder text for the input |
autoHighlight | boolean | true | Auto-highlight first matching item while filtering |
size | enumsmmdlg | "md" | Size variant |
className | string | Not set | Wrapper class name |
label | string | Not set | Visible label text above the combobox |
helperText | string | Not set | Helper text shown below the combobox |
error | union | Not set | Show error styling. When a string is provided, it is displayed as an error message. |
disabled | boolean | false | Disable the combobox |
autoComplete | string | Not set | — |
form | string | Not set | — |
inputRef | union | Not set | — |
readOnly | boolean | Not set | — |