Inputs@knitui/components
Combobox
Combobox is a compound component that wires a trigger target to a floating dropdown of selectable options. Compose Combobox.Target + Combobox.Dropdown > Combobox.Options > Combobox.Option. Use useCombobox to obtain a store for controlled open/close state. Groups, empty states, headers, footers, and a clear button are all first-class sub-components.
import { Combobox } from "@knitui/components";Playground
Loading playground…
<Combobox
size="sm"
position="bottom"
disabled={false}
readOnly={false}
/>Examples
Sizes
Demonstrates the five size tokens on the dropdown font and spacing.
Loading example…
Shadows
The shadow prop lifts the dropdown off the page using the shared elevation ladder (xs → xl). Each combobox below is always open and rendered inline (withinPortal={false}) inside its own relative wrapper so the dropdowns sit side by side without overlapping.
Loading example…
Controlled
Controlled selection — the selected value and the search query are owned by the parent.
Loading example…
Grouped
Grouped options with labelled sections.
Loading example…
Disabled Option
A disabled option cannot be selected; the combobox stays open.
Loading example…
Empty State
Empty state message when no options match the search query.
Loading example…
With Header And Footer
Header and footer slots frame the option list with extra content.
Loading example…
With Clear And Chevron
ClearButton and Chevron sub-components used alongside the target.
Loading example…
Button Target
Button target — use targetType="button" when the trigger is a control (not a text field). The dropdown anchors to the button itself and a press toggles it open/closed, so no focus/blur wiring is needed.
Loading example…
Options Dropdown
Combobox.OptionsDropdown renders parsed data into option rows for you — no hand-composed Combobox.Option list. value drives the check icon and renderOption customises each row's content.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | `Combobox.Target` + `Combobox.Dropdown`. |
closeOnClickOutside | boolean | undefined | true | Close on outside press (web). |
closeOnEscape | boolean | undefined | true | Close on `Escape` (web). |
disabled system | boolean | undefined | false | Skip rendering the dropdown. |
keepMounted | boolean | undefined | false | Keep the dropdown mounted while closed. |
offset | number | undefined | 8 | Gap between target and dropdown in px. |
onOptionSubmit | ((value: string) => void) | undefined | — | Called when an option is submitted (click or `Enter`). |
position | Placement | undefinedbottom · top · left · right · bottom-start · bottom-end · top-start · top-end | 'bottom' | Dropdown placement relative to the target. |
radius system | RadiusTokens | undefined | — | Dropdown border radius. |
readOnly | boolean | undefined | false | Dropdown opens but options are presentational. |
shadow system | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | undefinedunset · xs · sm · md · lg · xl | 'md' | Elevation — drop shadow from the shared ladder. |
size system | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | undefinedxxs · xs · sm · md · lg · xl · xxl | 'md' | Controls size shared to dropdown parts. |
store | ComboboxStore | undefined | — | Store created by `useCombobox`. A self-managed store is created if omitted. |
width | PopoverWidth | undefined | 'target' | Dropdown width; `'target'` matches the target. |
withinPortal | boolean | undefined | true | Render the dropdown in a portal. |
zIndex | number | undefined | 300 | Dropdown `z-index`. |