Combobox — Loidolt Theme

import { Combobox } from '@loidolt/theme-svelte';

Example

Sheet stock

Type to narrow the list.

Value: unset

Notes

Options may be grouped under headings, as { label, options } entries. A group's disabled disables every option in it.
Typing filters on the label, ignoring case and accents. For a server search, set filter={false} and fetch in onQueryChange, with queryDebounce to spare the server; show loading meanwhile.
The result count is announced as the list narrows, through a live region that stays mounted.
Closing the list restores the selected label, so half-typed text never passes for the value.
Rest props land on the text input, so it wires into Field like any control.

Props

Generated from the component source, so it cannot drift from the implementation.

Combobox props
Prop	Type	Default	Notes
`options` required	`OptionEntry<T>[]`	`—`	Options, optionally in labelled groups.
`allowDeselect`	`boolean`	`false`	Choosing the selected option again clears it.
`boxed`	`boolean`	`false`	Draws the full box instead of the default underline.
`class`	`string`	`—`	Lands on the wrapper; the rest props land on the text input.
`contentClass`	`string`	`—`	Class for the portaled list.
`disabled`	`boolean`	`false`
`emptyText`	`string`	`'No results'`
`filter`	`((option: Option<T>, query: string) => boolean) \| false`	`—`	How typing narrows the list. Defaults to a case- and accent-insensitive match on the label. Pass `false` when the options already come back filtered — from a server search driven by `onQueryChange`.
`item`	`Snippet<[Option<T>, { selected: boolean; highlighted: boolean }]>`	`—`	Custom row content. The check mark for the selected row is still drawn.
`label`	`string`	`—`	Accessible name when the combobox is not wrapped in a `Field` or `<label>`.
`loading`	`boolean`	`false`	Results are on their way; shown in place of the list and announced.
`loadingText`	`string`	`'Loading…'`
`name`	`string`	`—`	Submits the selected value with a form.
`onOpenChange`	`(open: boolean) => void`	`—`
`onQueryChange`	`(query: string) => void`	`—`	Called with the typed text, after `queryDebounce` — the hook for a server-side search.
`onValueChange`	`(value: T \| '') => void`	`—`
`open` bindable	`boolean`	`false`
`query` bindable	`string`	`''`	The text typed so far. Bindable.
`queryDebounce`	`number`	`0`	Milliseconds to wait after the last keystroke before calling `onQueryChange`.
`ref` bindable	`HTMLElement \| null`	`null`	The text input.
`required`	`boolean`	`false`
`resultsText`	`(count: number) => string`	(count) => `${count} ${count === 1 ? 'result' : 'results'}`	What screen readers hear as the list narrows.
`triggerLabel`	`string`	`'Show options'`	Accessible name of the button that opens the list.
`value` bindable	`T \| ''`	`''`	The selected value, or `''` for none.