Categorized 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 select and multiselect components

Example

Click the button to open the Categorized Multiselect

Genesis

Declaration

<rapid-categorized-multiselect></rapid-categorized-multiselect>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-categorized-multiselect
      ${ref('multiselect')}
      @selectionChange=${(x) => x.onChange()}
      :options=${(x) => x.options}
    >
    </rapid-categorized-multiselect>
  `,
})
export class MyElement extends GenesisElement {
  @observable multiselect: CategorizedMultiselect;
  const options = [
    {
      type: "First category",
      value: 'First value',
      label: 'This is the first value',
      description:
        'Here you can add further information about each categorized multiselect item if you would like to',
    },
    {
      type: "Second category",
      value: 'Second value',
      label: 'This is the second value',
    },
    {
      type: "Second category",
      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-categorized-multiselect></rapid-categorized-multiselect>

Usage

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

  const options = [
    {
      type: "First category",
      value: 'First value',
      label: 'This is the first value',
      description:
        'Here you can add further information about each categorized multiselect item if you would like to',
    },
    {
      type: "Second category",
      value: 'Second value',
      label: 'This is the second value',
    },
    {
      type: "Second category",
      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-categorized-multiselect options={options} onselectionChange={selectionChange} selectedOptions={selectedOptions}>
    </rapid-categorized-multiselect>
  )
}

Angular

Declaration

<rapid-categorized-multiselect></rapid-categorized-multiselect>

Usage

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

  options = [
    {
      type: "First category",
      value: 'First value',
      label: 'This is the first value',
      description:
        'Here you can add further information about each categorized multiselect item if you would like to',
    },
    {
      type: "Second category",
      value: 'Second value',
      label: 'This is the second value',
    },
    {
      type: "Second category",
      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	Component identifier.	<rapid-categorized-multiselect name="myMultiselect">
auto-position	boolean	Controls automatic positioning behavior. Default true.	<rapid-categorized-multiselect auto-position>
search	boolean	Controls search functionality visibility. Default true.	<rapid-categorized-multiselect search>
disabled	boolean	Disables the component. Default false.	<rapid-categorized-multiselect disabled>

Properties

Name	Type	Description	Example
options	CategorizedMultiselectOption[]	Data options. Default [].	<rapid-categorized-multiselect :options=${() => [ { type: 'Category 1', value: 'opt1', label: 'Option 1' }, { type: 'Category 2', value: 'opt2', label: 'Option 2' } ]}> <rapid-categorized-multiselect :options=${(x) => x.options}>
selectedOptions	string[]	Selected option values. Default [].	<rapid-categorized-multiselect :selectedOptions=${() => ['opt1', 'opt3']}> <rapid-categorized-multiselect :selectedOptions=${(x) => x.selectedOptions}>
position	Position	Controls dropdown position. Default Position.BELOW.	<rapid-categorized-multiselect :position=${() => Position.ABOVE}> <rapid-categorized-multiselect :position=${(x) => x.dropdownPosition}>

Slots

Name	Description
Default	For the component label content
button-content	Customizable button content (defaults to a plus icon)

Parts

Name	Description
root	The main container
control	The control button area
control-button	The button element
label	The component label
options	The dropdown options container
filter-search	The search input field
checkbox-container	Container for option checkboxes
multiselect-checkbox	Individual checkbox items

Events fired

Event	Type	Use	Example
selectionChange	string[]	Fired when selection changes. The event detail contains an array of selected option values.	<rapid-categorized-multiselect @selectionChange="${(e) => handleSelectionChange(e.detail)}">

Events listened to

This component doesn't listen to any events.