Components
MultiSelect
A searchable selection with removable chips and named form values.
Props
Native attributes and event handlers are forwarded to the root Div component. Common transitions apply to that root.
Theme entries: multiSelect,multiSelectChip,multiSelectRemove,multiSelectValues.
| 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 options' | 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. |
options | SelectOption[] | [] | See usage notes and the component API. |
outTransition | TransitionProps | undefined | Exit transition override. |
placeholder | string | 'Add an option...' | 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 MultiSelect from sveltewind/components. This example shows its default styling in a usable context.
Loading...Selected values are strings. Each selection becomes a removable chip. name creates one hidden form input per selected value.
Examples
Theme variants
Every variant available for MultiSelect in the built-in themes is shown below.
compact — Apply the compact variant.
Loading...comfortable — Apply the comfortable variant.
Loading...full — Apply the full variant.
Loading...Class overrides
Apply rounded-none border-primary-500 shadow-none locally.
Loading...Props and behavior
Change disabled while retaining the default component styling.
Loading...Content and values
Provide different options, label values.
Loading...