Combobox

Initial selection (uncontrolled). Single: a key or `null`; multiple: keys.

Keys that cannot be selected or focused.

Bindable query text (what the user typed — distinct from the selection).

Show the loading row instead of options (for async fetches).

Bindable open state.

Semantic tone of the field, typically its validation state.

Bindable current selection. Single: a key or `null`; multiple: an array of keys.

Surface ramp step the popup list paints.

Resting border color of the popup list surface.

Corner radius of the popup list surface. The list is a Panel nested inside a transparent, unpadded popover `<dialog>`, so its own `radius="inner"` would resolve against that dialog's `xl` corner rather than the field — pass the corner you want explicitly.

Elevation of the popup list surface. Floating popups get `lg` from the listbox recipe's `[data-popover]` rule by default.

Placeholder text for the input.

Field and option size.

Truncate inline chip labels to this many characters (appending `…`). The full label is kept in the chip's `title` and shown un-truncated inside the overflow popover. Composes with `chipMaxWidth`.

CSS `max-width` (e.g. `"8rem"`) applied to inline chip labels with ellipsis truncation. Composes with `chipMaxChars`.

Cap the inline chip footprint in multiselect. A `number` shows the last N selected chips inline and collapses the rest behind a "+N" overflow chip; `"auto"` measures the field and fits as many chips as the width allows; `false` disables collapsing entirely so every chip renders inline (the field grows). The framework wrappers default this to `1`; pass `false` to opt out. The "+N" chip opens a popover listing all collapsed options with remove buttons.

Floating-UI placement of the popup.

Show a "Create …" row for a typed value that isn't in the list. In multiple mode a created value is selected right away (one `onValueChange`); `onCreate` tells you to add it to `items`.

What Backspace in an empty field does to the last chip: `"remove"` drops it, `"edit"` removes it and puts its text back in the field to fix.

Characters that split the text into separate values (multiple + `allowCreate`). Typing one commits the text before it; pasting text that contains them adds one value per piece — a piece naming an existing option selects it, anything else is created. E.g. `[",", ";", "\n"]`.

`true` uses the built-in case-insensitive substring filter; `false` disables it (feed your own `items`); or pass a `(optionText, query) => boolean` predicate.

The options to choose from, in render order. An option is `{ id, label, description?, eyebrow?, leading?, trailing?, textValue?, disabled? }`; a section is `{ id, type: "section", title?, items }`. For async/remote, feed your own pre-filtered list and set `filter={false}`.

Fires for each free-text value committed (`allowCreate`). Multiple mode has already selected it — add it to `items`; single mode leaves it in the field for you to add and select.

Fires when the query text changes (use with `filter={false}` for async).

Fires when the open state changes.

Fires when the selection changes.

Turns typed or pasted text into the value to create (`allowCreate`): normalize it, pull an address out of `Name <a@b.c>`, …. Return `null` to reject the text — nothing is created and it stays in the field. Without it the trimmed text is created as-is.

`"single"` commits a label and closes; `"multiple"` toggles removable chips and keeps the popup open.

Checks each selected value (multiple). Return `false` or an error message to mark that chip invalid: it turns danger, and the message becomes its tooltip and part of its remove button's label.

Content shown when there are no matches.

Leading content inside the field (e.g. a search icon).

Content shown while `isLoading`.

Bindable reference to the inner `<input>`.

Stable id prefix; sub-element ids derive from it.

Per-slot style / attribute override bag for customizing any rendered slot or composed child component.