Rokkit Logo 1.0.0-next.122

MultiSelect

Input component that allows users to choose multiple values from a list of options.

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:

No preview available
No tabs available.

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.

No preview available
No tabs available.
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 →