Components
Combobox
An editable, searchable single selection with a keyboard-controlled listbox.
Props
Native attributes and event handlers are forwarded to the root Div component. Common transitions apply to that root.
Theme entries: combobox,comboboxEmpty,comboboxInput,comboboxLabel,comboboxList,comboboxOption,comboboxPanel.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Custom content; see the usage notes for its component-specific role. |
class | string | '' | Tailwind utilities merged after the component theme and variants. |
disabled | boolean | false | See usage notes and the component API. |
element | HTMLDivElement | null | $bindable(null) | Bindable reference to the composition root. |
inTransition | TransitionProps | undefined | Enter transition override. |
isVisible | boolean | $bindable(true) | Bindable visibility state. |
label | string | 'Choose an option' | See usage notes and the component API. |
name | string | undefined | undefined | See usage notes and the component API. |
onValueChange | ((value: string) => void) | undefined | undefined | See usage notes and the component API. |
open | boolean | $bindable(false) | See usage notes and the component API. |
options | SelectOption[] | [] | See usage notes and the component API. |
outTransition | TransitionProps | undefined | Exit transition override. |
placeholder | string | 'Search options...' | See usage notes and the component API. |
required | boolean | false | See usage notes and the component API. |
theme | Theme | globalTheme | Local Theme instance; defaults to the global theme. |
transition | TransitionProps | [noopTransition, {}] | Shared transition function and options. |
value | string | $bindable('') | See usage notes and the component API. |
variants | string[] | [] | Ordered component theme variants or cross-component references. |
Default usage
Import Combobox from sveltewind/components. This example shows its default styling in a usable context.
Type to search, or use the arrow keys.
Loading...Type to filter. Use Up/Down, Home/End, and Enter to select; Escape closes without changing the value. Disabled options cannot be selected. name submits the selected value rather than the search text.
Examples
Theme variants
Every variant available for Combobox in the built-in themes is shown below.
compact — Apply the compact variant.
Type to search, or use the arrow keys.
Loading...comfortable — Apply the comfortable variant.
Type to search, or use the arrow keys.
Loading...full — Apply the full variant.
Type to search, or use the arrow keys.
Loading...Class overrides
Apply rounded-none border-primary-500 shadow-none locally.
Type to search, or use the arrow keys.
Loading...Props and behavior
Change disabled while retaining the default component styling.
Type to search, or use the arrow keys.
Loading...Content and values
Provide different options, label values.
Type to search, or use the arrow keys.
Loading...