MultiCombobox

Editable tagged selection with retained async results.@gemologic/sheen · forms

Playground

label

placeholder

filter

Owners

Ada

<MultiCombobox label="Owners" options={[{ value: "ada", label: "Ada" }]} defaultValue={["ada"]}  filter="contains"/>

Variant matrix

Multiple owners

Owners

Ada

filter: contains

Owners

Ada

filter: startsWith

Owners

Ada

filter: endsWith

Owners

Ada

filter: false

Owners

Ada

Anatomy

Package

@gemologic/sheen

Source

packages/ui/src/primitives/Combobox.tsx

Tokens

--sheen-color-bg-inset
--sheen-color-bg-raised
--sheen-color-border-control
--sheen-color-focus-ring

Accessibility

Role: comboboxKeyboard: ArrowDown, ArrowUp, Home, End, Enter, Escape, Backspace

Do

Keep option values stable so selected tags survive filtered result subsets.

Do not

Do not replace accepted options with a loading placeholder.

Generated props

Name	Type	Default	Description
`value`	`readonly string[]`	—	Controlled ordered set of selected values.
`defaultValue`	`readonly string[]`	—	Initial uncontrolled ordered set of selected values.
`onValueChange`	`(value: readonly string[]) => void`	—	Receives committed unique values in selection order.
`label` *	`string`	—	Required visible label.
`options` *	`readonly ComboboxOption[]`	—	Accepted options with unique nonempty values and labels.
`name`	`string`	—	Native multi-select form name.
`form`	`string`	—	Optional external form ID.
`placeholder`	`string`	—	Text shown when no tags are selected.
`description`	`string`	—	Supporting text associated with the input.
`error`	`string`	—	Field validation text and invalid state.
`disabled`	`boolean`	`false`	Disables input, tags, selection, and submission.
`readOnly`	`boolean`	`false`	Allows inspection but rejects query and tag changes.
`required`	`boolean`	`false`	Requires at least one committed selection for native form submission.
`filter`	`ComboboxFilter`	`contains`	Built-in label filter, or false when the app supplies externally filtered options.
`onInputChange`	`(value: string) => void`	—	Receives editable query changes; the app owns debounce, cancellation, and request ordering.
`pending`	`boolean`	`false`	Retains and disables the last accepted results until replacement results are accepted.
`resultsError`	`string`	—	Nonblocking async-result error; selected tags remain available.
`onRetry`	`() => void`	—	Optional retry action shown with resultsError.
`inputRef`	`(element: HTMLInputElement) => void`	—	Receives the visible native input.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.