EccUtilsDesignMultiSelect Component

2.0.0-alpha.6

<ecc-utils-design-multi-select/>

EccUtilsDesignMultiSelect

Overview

The ecc-utils-design-multi-select component provides a way to select multiple options from a dropdown list. It features a searchable interface, keyboard navigation, and supports pre-selected values. The component displays selected items as removable badges in the trigger.

This component is composed of MultiSelect, MultiSelectTrigger, MultiSelectContent, and MultiSelectItem to create a complete multi-select interface.

Usage

Basic Multi-Select

This example shows a basic multi-select with a list of options.

Apple

Banana

Orange

Strawberry

Blueberry

With Pre-selected Values

This example shows a multi-select with some values pre-selected.

JavaScript

TypeScript

Python

Java

Rust

Components

Component	Tag Name	Description
`MultiSelect`	`ecc-utils-design-multi-select`	The root container for the multi-select.
`MultiSelectTrigger`	`ecc-utils-design-multi-select-trigger`	The clickable trigger that shows selected values.
`MultiSelectContent`	`ecc-utils-design-multi-select-content`	The dropdown content containing the options.
`MultiSelectItem`	`ecc-utils-design-multi-select-item`	An individual selectable option.

Properties

`EccUtilsDesignMultiSelect`

Property	Type	Default	Description
`value`	`string[]`	`[]`	Array of selected values.
`placeholder`	`string`	`"Select options..."`	Placeholder text when no options are selected.
`disabled`	`boolean`	`false`	When `true`, disables the multi-select.
`name`	`string`	`""`	The name attribute for form submissions.

`value`

Controls the selected values in the multi-select. This should be an array of strings matching the values of selected items.

<EccUtilsDesignMultiSelect value={['apple', 'banana']}>
  ...
</EccUtilsDesignMultiSelect>

`placeholder`

Text displayed when no options are selected, providing a hint to users about what to select.

<EccUtilsDesignMultiSelect placeholder="Choose your favorite fruits...">
  ...
</EccUtilsDesignMultiSelect>

`disabled`

When true, disables the entire multi-select, preventing user interaction.

<EccUtilsDesignMultiSelect disabled={true}>
  ...
</EccUtilsDesignMultiSelect>

`name`

The name attribute used when submitting the multi-select as part of a form.

<EccUtilsDesignMultiSelect name="preferences">
  ...
</EccUtilsDesignMultiSelect>

`EccUtilsDesignMultiSelectTrigger`

Property	Type	Default	Description
`disabled`	`boolean`	`false`	When `true`, disables the trigger.

`disabled`

When true, disables the trigger button, preventing the dropdown from opening.

<EccUtilsDesignMultiSelectTrigger disabled={true} />

`EccUtilsDesignMultiSelectContent`

Property	Type	Default	Description
`position`	`string`	`"popper"`	The positioning strategy for the dropdown.

`position`

Controls how the dropdown content is positioned relative to the trigger.

<EccUtilsDesignMultiSelectContent position="item-aligned">
  ...
</EccUtilsDesignMultiSelectContent>

`EccUtilsDesignMultiSelectItem`

Property	Type	Default	Description
`value`	`string`	`""`	A unique value for the item.
`disabled`	`boolean`	`false`	When `true`, disables the item.

`value`

A unique identifier for the item. This value is used in the multi-select's value array when the item is selected.

<EccUtilsDesignMultiSelectItem value="apple">Apple</EccUtilsDesignMultiSelectItem>

`disabled`

When true, prevents the item from being selected or deselected.

<EccUtilsDesignMultiSelectItem value="premium" disabled={true}>Premium Option</EccUtilsDesignMultiSelectItem>

Events

`EccUtilsDesignMultiSelect`

Event Name	React Event Name	Detail Type	Description
`ecc-input-changed`	`onEccInputChanged`	`{ value: string[] }`	Fired when the selection changes.

`ecc-input-changed`

This event is fired when the user selects or deselects options.

<EccUtilsDesignMultiSelect 
  onEccInputChanged={(event) => {
    console.log('Selected values:', event.detail.value);
  }}
>
  ...
</EccUtilsDesignMultiSelect>

Select Pagination