MultiSelectCombobox
Searchable multi-select combobox with removable selected tokens
Svelte
React
Vue
Angular
SolidJS
Accessibility
- Pair the control with a visible label or aria-label and keep helper or error text programmatically associated.
- Provide native name, autocomplete, and value wiring when the component participates in form submission.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
svelte
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { MultiSelectCombobox } from '@dryui/ui';
</script>
<MultiSelectCombobox.Root bind:value={selectedFrameworks} bind:query={frameworkQuery} name="frameworks">
<MultiSelectCombobox.SelectionList>
{#each selectedFrameworks as framework}
<MultiSelectCombobox.SelectionItem value={framework}>
{framework}
<MultiSelectCombobox.SelectionRemove value={framework} />
</MultiSelectCombobox.SelectionItem>
{/each}
</MultiSelectCombobox.SelectionList>
<MultiSelectCombobox.Input placeholder="Search frameworks..." />
<MultiSelectCombobox.Content>
<MultiSelectCombobox.Item value="svelte">Svelte</MultiSelectCombobox.Item>
<MultiSelectCombobox.Item value="react">React</MultiSelectCombobox.Item>
</MultiSelectCombobox.Content>
</MultiSelectCombobox.Root>Import options
Root package
ts
import { MultiSelectCombobox } from '@dryui/ui'Per-component subpath
ts
import { MultiSelectCombobox } from '@dryui/ui/multi-select-combobox'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
MultiSelectCombobox.Root | |||||
| value | string[] | Current controlled or bindable value. | — | — | — |
| query | string | — | — | — | — |
| open | boolean | Whether the overlay or disclosure is currently open. | — | — | — |
| disabled | boolean | Prevents interaction and applies disabled styling. | — | — | — |
| name | string | Field name used during native form submission. | — | — | — |
| maxSelections | number | — | — | — | — |
| onvaluechange | (value: string[]) => void | — | — | — | — |
| onquerychange | (query: string) => void | — | — | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
MultiSelectCombobox.Input | |||||
| placeholder | string | Hint text shown when no value is selected or entered. | '' | — | — |
MultiSelectCombobox.Content | |||||
| placement | toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end | — | 'bottom-start' | — | — |
| offset | number | — | 4 | — | — |
| loading | boolean | — | false | — | — |
| loadingContent | Snippet | — | — | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
MultiSelectCombobox.Group | |||||
| label | string | Visible label text shown for the control or item. | — | ✓ | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
MultiSelectCombobox.Item | |||||
| value | string | Current controlled or bindable value. | — | ✓ | — |
| textValue | string | — | — | — | — |
| disabled | boolean | Prevents interaction and applies disabled styling. | false | — | — |
| icon | Snippet | — | — | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
MultiSelectCombobox.Empty | |||||
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
MultiSelectCombobox.SelectionList | |||||
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
MultiSelectCombobox.SelectionItem | |||||
| value | string | Current controlled or bindable value. | — | ✓ | — |
| children | Snippet | Content rendered inside the component. | — | — | — |
MultiSelectCombobox.SelectionRemove | |||||
| value | string | Current controlled or bindable value. | — | ✓ | — |
| label | string | Visible label text shown for the control or item. | — | — | — |