Multiselect

Use cases:

• Selecting one or more from a list of options
• Adding extra information to the options in addition to what is possible with the standard select component

Example

Genesis

Declaration

<rapid-multiselect></rapid-multiselect>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-multiselect
      ${ref('multiselect')}
      @selectionChange=${(x) => x.onChange()}
      :options=${(x) => x.options}
    >
    </rapid-multiselect>
  `,
})
export class MyElement extends GenesisElement {
  @observable multiselect: Multiselect;
  const options = [
    {
      value: 'First value',
      label: 'This is the first value',
    },
    {
      value: 'Second value',
      label: 'This is the second value',
    },
    {
      value: 'Third value',
      label: "This is the third value, and it's disabled",
      disabled: true,
    },
  ]
  onChange() {
    // You can also get the selected options via `event.detail`
    console.log(this.multiselect.selectedOptions)
  }
}

React

Declaration

<rapid-multiselect></rapid-multiselect>

Usage

export function MyComponent() {
  const [selectedOptions, setSelectedOptions] = useState([])

  const options = [
    {
      value: 'First value',
      label: 'This is the first value',
    },
    {
      value: 'Second value',
      label: 'This is the second value',
    },
    {
      value: 'Third value',
      label: "This is the third value, and it's disabled",
      disabled: true,
    },
  ]

  const selectionChange = (e) => {
    console.log(e.detail)
    setSelectedOptions(e.detail)
  }

  return (
    <rapid-multiselect options={options} onselectionChange={selectionChange} selectedOptions={selectedOptions}>
    </rapid-multiselect>
  )
}

Angular

Declaration

<rapid-multiselect></rapid-multiselect>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-component',
  template: `
    <rapid-multiselect
      [options]="options"
      [selectedOptions]="selectedOptions"
      (selectionChange)="selectionChange($event)">
    </rapid-multiselect>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class MyComponent {
  selectedOptions: any[] = [];

  options = [
    {
      value: 'First value',
      label: 'This is the first value',
    },
    {
      value: 'Second value',
      label: 'This is the second value',
    },
    {
      value: 'Third value',
      label: "This is the third value, and it's disabled",
      disabled: true,
    },
  ];

  selectionChange(event: CustomEvent) {
    console.log(event.detail);
    this.selectedOptions = event.detail;
  }
}

API

Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.

Attributes

Name	Type	Description	Example
name	string	The name of the multiselect component.	<rapid-multiselect name="myMultiselect">
autoPosition	boolean	Controls if dropdown automatically positions based on available space.	<rapid-multiselect autoPosition>
all	boolean	Whether to show "Select All" option. Default true.	<rapid-multiselect all>
allSelected	boolean	Whether all options are selected by default.	<rapid-multiselect allSelected>
search	boolean	Whether to enable search functionality. Default true.	<rapid-multiselect search>
disabled	boolean	Whether the component is disabled.	<rapid-multiselect disabled>
creatable	boolean	Whether new options can be created.	<rapid-multiselect creatable>
async	boolean	Whether to use async data loading.	<rapid-multiselect async>
debounce	number	Debounce time for async searches.	<rapid-multiselect debounce=300>
filterByContains	boolean	Whether to filter using "contains" vs "starts with". Default false.	<rapid-multiselect filterByContains>
position	"below" | "above"	Controls dropdown positioning (positioning enum).	<rapid-multiselect position="BELOW">

Properties

Name	Type	Description	Example
valueFormatter	function	Function to format option display values.	<rapid-multiselect :valueFormatter=${() => (option: MultiselectOption) => `${option.label} (${option.value})`}>
options	MultiselectOption[]	Available options.	<rapid-multiselect :options=${() => [ { value: 'opt1', label: 'Option 1' }, { value: 'opt2', label: 'Option 2' } ]}> <rapid-multiselect :options=${(x) => x.options}>
selectedOptions	string[]	Currently selected option values.	<rapid-multiselect :selectedOptions=${() => ['opt1', 'opt3']}> <rapid-multiselect :selectedOptions=${(x) => x.selectedOptions}>
onAllSelectedCallback	function	Callback when "select all" state changes.	<rapid-multiselect :onAllSelectedCallback=${() => (allSelected: boolean) => console.log('All selected:', allSelected)}>
itemRenderer	function	Custom renderer function for option items. Receives option, parent component and prefix as parameters.	<rapid-multiselect :itemRenderer=${() => (option, parent, prefix) => html`<span>${option.label}</span>`}>

Slots

Name	Description
label	Slot for the component label
indicator	Slot used for the loading indicator
Default	Used for datasource elements
options-header	Slot for adding custom header content above the options list

Parts

Name	Description
label	Part for the label element
root	Part for the root container
control	Part for the control container
filter-search	Part for the search input field
indicator	Part for the dropdown indicator/arrow
options-ol	Part for the options list container
checkbox	Part for the checkbox components
option-label	Part for the label of each option

CSS vars

Name	Description
--scrollbar-width	Controls the width of the scrollbar.
--scrollbar-thumb-width	Controls the width of the scrollbar thumb.

Events fired

Event	Type	Use	Example
selectionChange	string[]	Emitted when a single option is selected or deselected, or when the "Select All" functionality is used. The event detail contains an array of selected option values.	<rapid-multiselect @selectionChange="${(e) => handleSelectionChange(e.detail)}">

Events listened to

This component doesn't listen to any events.