Introduction
Input component that allows users to choose multiple values from a list of options. This component has properties and behavior similar to the List component, but designed for multi-selection scenarios.
Notable features:
- Multiple value selection with checkboxes
- Field mapping to adapt to any data structure
- Placeholder text support for empty states
- Keyboard navigation and accessibility support
- Custom component rendering with `using` property
- Search and filtering capabilities
Basic Example
Here's a simple example of a MultiSelect component. Select multiple options to see how the selection works:
Select multiple values
Selected Values:
[]
App.svelte
Highlighting code...
Properties
The MultiSelect component provides comprehensive properties for multi-value form integration.
Core Properties
- options: Array of options to choose from
- value: Array of selected values (bindable)
- fields: Adapt to your data by customizing field mappings
- placeholder: Text displayed when no values are selected
Customization
- using: Object containing components for displaying data
- class: Custom CSS classes for styling
Highlighting code...
Field Mapping
Like other Rokkit components, MultiSelect can adapt to your data structure using field mappings for complex objects.
Choose categories
Selected Categories:
[]
App.svelte
Highlighting code...
Highlighting code...
Ready for more?
Now that you understand how the MultiSelect component works, explore other selection components or learn about form integration.
Select → Switch →