Select

The Select component provides a unified dropdown selection experience with support for single selection, multiple selection, and hierarchical tree selection modes.

Installation

npm install @duskmoon-dev/el-select

Usage

import '@duskmoon-dev/el-select/register';
<el-dm-select
  placeholder="Select a fruit..."
></el-dm-select>

Live Demo

Basic Select

Empty Select (No Options)

Properties

PropertyTypeDefaultDescription
valuestring''Selected value(s) - JSON string for multiple
placeholderstring''Placeholder text
disabledbooleanfalseDisables the select
multiplebooleanfalseEnable multi-select mode
tree-databooleanfalseEnable tree-select mode
searchablebooleanfalseEnable search filtering
clearablebooleanfalseShow clear button
cascadebooleanfalseAuto-select children when parent selected (tree mode)
check-strictlybooleanfalseIndependent parent/child selection (tree mode)
default-expand-allbooleanfalseExpand all tree nodes initially
max-tag-countnumber-1Max visible tags (-1 = unlimited)
size'sm' | 'md' | 'lg''md'Size variant
optionsstring''JSON string of flat options
tree-optionsstring''JSON string of tree options

Option Format

Options can be set via HTML attribute or JavaScript:

Via Attribute (JSON string)

<el-dm-select
  options='[{"value":"apple","label":"Apple"},{"value":"banana","label":"Banana"}]'
></el-dm-select>

Via JavaScript

interface SelectOption {
  value: string;      // Unique value
  label: string;      // Display text
  disabled?: boolean; // Disable this option
  group?: string;     // Group name for grouping
}
const select = document.querySelector('el-dm-select');
select.setOptions([
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' }
]);

Multiple Selection

Multiple Selection

<el-dm-select
  multiple
  searchable
  clearable
  placeholder="Select languages..."
></el-dm-select>

Tree Select

For hierarchical data, use tree mode with setTreeOptions():

interface TreeSelectOption {
  value: string;
  label: string;
  disabled?: boolean;
  children?: TreeSelectOption[];
}

Tree Select

<el-dm-select
  tree-data
  searchable
  clearable
  placeholder="Select from tree..."
></el-dm-select>
select.setTreeOptions([
  {
    value: 'frontend',
    label: 'Frontend',
    children: [
      { value: 'react', label: 'React' },
      { value: 'vue', label: 'Vue' }
    ]
  },
  {
    value: 'backend',
    label: 'Backend',
    children: [
      { value: 'node', label: 'Node.js' },
      { value: 'python', label: 'Python' }
    ]
  }
]);

Tree Select with Cascade

When cascade is enabled, selecting a parent automatically selects all children:

Tree Select with Cascade

<el-dm-select
  tree-data
  multiple
  cascade
  default-expand-all
  placeholder="Select with cascade..."
></el-dm-select>

Sizes

Select Sizes

<el-dm-select size="sm" placeholder="Small..."></el-dm-select>
<el-dm-select size="md" placeholder="Medium..."></el-dm-select>
<el-dm-select size="lg" placeholder="Large..."></el-dm-select>

Disabled

Disabled

<el-dm-select disabled placeholder="Disabled..."></el-dm-select>

Events

EventDescription
changeFired when selection changes
searchFired when search text changes
clearFired when cleared
expandFired when tree node expanded/collapsed

Event Handling

const select = document.querySelector('el-dm-select');

select.addEventListener('change', (event) => {
  console.log('Selected:', event.detail.value);
  console.log('Selected options:', event.detail.selectedOptions);
});

select.addEventListener('search', (event) => {
  console.log('Search:', event.detail.searchValue);
});

Keyboard Navigation

  • Arrow Down/Up: Navigate options
  • Enter: Select highlighted option
  • Escape: Close dropdown
  • Backspace: Remove last tag (in multiple mode)
  • Arrow Right: Expand tree node
  • Arrow Left: Collapse tree node

Accessibility

  • Uses role="combobox" with proper ARIA attributes
  • aria-expanded indicates dropdown state
  • Options have role="option" with aria-selected
  • Tree nodes use role="treeitem" with aria-expanded
  • Full keyboard navigation support