UWC Components
  • Default
  • Material
  • Fluent

On this page

Dropdown

A full-featured select/dropdown component with single and multi-select, client-side filter, option groups, clear button, loading state, and full keyboard navigation.

uwc-dropdown is a feature-rich select component driven by a SelectOption[] property. It supports single-select, multi-select with chips, filtering, option groups, badges, and loading states.

Import

All components

import '@uwc/components';

Selected component (Lit / Angular / Vue)

import { UwcDropdown } from '@uwc/components/dropdown';
customElements.define('uwc-dropdown', UwcDropdown);

React

import { UwcDropdown } from '@uwc/components/react';

Usage

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('app-demo')
export class AppDemo extends LitElement {
  options = [
    { label: 'Option A', value: 'a' },
    { label: 'Option B', value: 'b' },
  ];
  render() {
    return html`<uwc-dropdown .options=${this.options} placeholder="Select..."></uwc-dropdown>`;
  }
}

React

import React from 'react';
import { UwcDropdown } from '@uwc/components/react';

const options = [{ label: 'Option A', value: 'a' }, { label: 'Option B', value: 'b' }];

export default function App() {
  return <UwcDropdown options={options} placeholder="Select..." />;
}

Angular

import { Component } from '@angular/core';
import '@uwc/dropdown';

@Component({
  selector: 'app-demo',
  standalone: true,
  template: `<uwc-dropdown [options]="options" placeholder="Select..."></uwc-dropdown>`,
})
export class AppComponent {
  options = [{ label: 'Option A', value: 'a' }, { label: 'Option B', value: 'b' }];
}

Vue

import '@uwc/dropdown';

export default {
  data() {
    return {
      options: [{ label: 'Option A', value: 'a' }, { label: 'Option B', value: 'b' }],
    };
  },
  template: `
    <uwc-dropdown :options="options" placeholder="Select..."></uwc-dropdown>
  `,
};

Basic Usage

import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('app-demo')
export class AppDemo extends LitElement {
  @state() options = [
    { label: 'Apple',  value: 'apple'  },
    { label: 'Banana', value: 'banana' },
    { label: 'Cherry', value: 'cherry' },
    { label: 'Mango',  value: 'mango'  },
  ];
  @state() multiOptions = [
    { label: 'HTML',       value: 'html' },
    { label: 'CSS',        value: 'css'  },
    { label: 'JavaScript', value: 'js'   },
    { label: 'TypeScript', value: 'ts'   },
  ];

  render() {
    return html`
      <div style="display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;">
        <uwc-dropdown .options=${this.options} placeholder="Single select..."></uwc-dropdown>
        <uwc-dropdown .options=${this.options} placeholder="With filter..." filter show-clear></uwc-dropdown>
        <uwc-dropdown .options=${this.multiOptions} placeholder="Multi-select..." multiple show-clear filter></uwc-dropdown>
      </div>
    `;
  }
}

import React from 'react';
import { UwcDropdown } from '@uwc/components/react';

export default function App() {
  const options = [
    { label: 'Apple',  value: 'apple'  },
    { label: 'Banana', value: 'banana' },
    { label: 'Cherry', value: 'cherry' },
    { label: 'Mango',  value: 'mango'  },
  ];
  const multiOptions = [
    { label: 'HTML',       value: 'html' },
    { label: 'CSS',        value: 'css'  },
    { label: 'JavaScript', value: 'js'   },
    { label: 'TypeScript', value: 'ts'   },
  ];
  const wrapStyle = { display: 'flex', flexWrap: 'wrap', gap: '1rem', alignItems: 'flex-start' };
  return (
    <div style={wrapStyle}>
      <UwcDropdown options={options} placeholder="Single select..." />
      <UwcDropdown options={options} placeholder="With filter..." filter showClear />
      <UwcDropdown options={multiOptions} placeholder="Multi-select..." multiple showClear filter />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;">
      <uwc-dropdown [options]="options" placeholder="Single select..."></uwc-dropdown>
      <uwc-dropdown [options]="options" placeholder="With filter..." filter show-clear></uwc-dropdown>
      <uwc-dropdown [options]="multiOptions" placeholder="Multi-select..." multiple show-clear filter></uwc-dropdown>
    </div>
  `
})
export class AppComponent {
  options = [
    { label: 'Apple',  value: 'apple'  },
    { label: 'Banana', value: 'banana' },
    { label: 'Cherry', value: 'cherry' },
    { label: 'Mango',  value: 'mango'  },
  ];
  multiOptions = [
    { label: 'HTML',       value: 'html' },
    { label: 'CSS',        value: 'css'  },
    { label: 'JavaScript', value: 'js'   },
    { label: 'TypeScript', value: 'ts'   },
  ];
}

export default {
  data() {
    return {
      options: [
        { label: 'Apple',  value: 'apple'  },
        { label: 'Banana', value: 'banana' },
        { label: 'Cherry', value: 'cherry' },
        { label: 'Mango',  value: 'mango'  },
      ],
      multiOptions: [
        { label: 'HTML',       value: 'html' },
        { label: 'CSS',        value: 'css'  },
        { label: 'JavaScript', value: 'js'   },
        { label: 'TypeScript', value: 'ts'   },
      ],
    };
  },
  template: `
    <div style="display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;">
      <uwc-dropdown :options="options" placeholder="Single select..."></uwc-dropdown>
      <uwc-dropdown :options="options" placeholder="With filter..." filter show-clear></uwc-dropdown>
      <uwc-dropdown :options="multiOptions" placeholder="Multi-select..." multiple show-clear filter></uwc-dropdown>
    </div>
  `
};

Basic

Pass SelectOption[] to the options property. The trigger renders its own styled button. 

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('dropdown-basic-demo')
export class AppDemo extends LitElement {
  options = [
    { label: 'Apple',  value: 'apple'  },
    { label: 'Banana', value: 'banana' },
    { label: 'Cherry', value: 'cherry' },
    { label: 'Durian', value: 'durian' },
    { label: 'Fig',    value: 'fig'    },
  ];
  render() {
    return html`
      <uwc-dropdown .options=${this.options} placeholder="Pick a fruit..."></uwc-dropdown>
    `;
  }
}

import React from 'react';
import { UwcDropdown } from '@uwc/components/react';

export default function App() {
  const options = [
    { label: 'Apple',  value: 'apple'  },
    { label: 'Banana', value: 'banana' },
    { label: 'Cherry', value: 'cherry' },
    { label: 'Durian', value: 'durian' },
    { label: 'Fig',    value: 'fig'    },
  ];
  return <UwcDropdown options={options} placeholder="Pick a fruit..." />;
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-dropdown [options]="options" placeholder="Pick a fruit..."></uwc-dropdown>
  `
})
export class AppComponent {
  options = [
    { label: 'Apple',  value: 'apple'  },
    { label: 'Banana', value: 'banana' },
    { label: 'Cherry', value: 'cherry' },
  ];
}

export default {
  data() {
    return {
      options: [
        { label: 'Apple',  value: 'apple'  },
        { label: 'Banana', value: 'banana' },
        { label: 'Cherry', value: 'cherry' },
      ],
    };
  },
  template: `
    <uwc-dropdown :options="options" placeholder="Pick a fruit..."></uwc-dropdown>
  `
};

Controlled value

Bind value two-ways by listening to the uwc-change event and updating state. 

import { LitElement, html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('dropdown-controlled-demo')
export class AppDemo extends LitElement {
  static styles = css`
    :host { display: block; }
    p { margin: .75rem 0 0; font-size: .875rem; color: #374151; }
    strong { color: #6366f1; }
  `;

  @state() value = null;

  options = [
    { label: 'Designer',  value: 'designer'  },
    { label: 'Developer', value: 'developer' },
    { label: 'Manager',   value: 'manager'   },
    { label: 'Marketing', value: 'marketing' },
  ];

  render() {
    return html`
      <uwc-dropdown
        .options=${this.options}
        .value=${this.value}
        placeholder="Select role..."
        @uwc-change=${(e) => { this.value = e.detail.value; }}>
      </uwc-dropdown>
      <p>Selected: <strong>${this.value ?? 'none'}</strong></p>
    `;
  }
}

import React, { useState } from 'react';
import { UwcDropdown } from '@uwc/components/react';

export default function App() {
  const [value, setValue] = useState(null);
  const options = [
    { label: 'Designer',  value: 'designer'  },
    { label: 'Developer', value: 'developer' },
    { label: 'Manager',   value: 'manager'   },
  ];
  return (
    <>
      <UwcDropdown
        options={options}
        value={value}
        placeholder="Select role..."
        onUwcChange={(e) => setValue(e.detail.value)}
      />
      <p>Selected: <strong>{value ?? 'none'}</strong></p>
    </>
  );
}

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-dropdown
      [options]="options"
      [value]="value()"
      placeholder="Select role..."
      (uwc-change)="value.set($event.detail.value)">
    </uwc-dropdown>
    <p>Selected: <strong>{{ value() ?? 'none' }}</strong></p>
  `
})
export class AppComponent {
  readonly value = signal<string | null>(null);
  options = [
    { label: 'Designer',  value: 'designer'  },
    { label: 'Developer', value: 'developer' },
    { label: 'Manager',   value: 'manager'   },
  ];
}

export default {
  data() {
    return {
      value: null,
      options: [
        { label: 'Designer',  value: 'designer'  },
        { label: 'Developer', value: 'developer' },
        { label: 'Manager',   value: 'manager'   },
      ],
    };
  },
  template: `
    <uwc-dropdown
      :options="options"
      :value="value"
      placeholder="Select role..."
      @uwc-change="value = $event.detail.value"
    ></uwc-dropdown>
    <p>Selected: <strong>{{ value ?? 'none' }}</strong></p>
  `
};

With filter

Add filter to show a search input inside the panel.

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('dropdown-filter-demo')
export class AppDemo extends LitElement {
  options = [
    { label: 'United States', value: 'us' },
    { label: 'United Kingdom', value: 'uk' },
    { label: 'Canada',         value: 'ca' },
    { label: 'Germany',        value: 'de' },
    { label: 'France',         value: 'fr' },
    { label: 'Japan',          value: 'jp' },
    { label: 'Australia',      value: 'au' },
  ];
  render() {
    return html`
      <uwc-dropdown
        .options=${this.options}
        placeholder="Select country..."
        filter
        filter-placeholder="Search countries...">
      </uwc-dropdown>
    `;
  }
}

import React from 'react';
import { UwcDropdown } from '@uwc/components/react';

export default function App() {
  const options = [
    { label: 'United States', value: 'us' },
    { label: 'Canada',        value: 'ca' },
    { label: 'Germany',       value: 'de' },
    { label: 'Japan',         value: 'jp' },
  ];
  return (
    <UwcDropdown
      options={options}
      placeholder="Select country..."
      filter
      filterPlaceholder="Search countries..."
    />
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-dropdown
      [options]="options"
      placeholder="Select country..."
      filter
      filter-placeholder="Search countries...">
    </uwc-dropdown>
  `
})
export class AppComponent {
  options = [
    { label: 'United States', value: 'us' },
    { label: 'Canada',        value: 'ca' },
    { label: 'Germany',       value: 'de' },
    { label: 'France',        value: 'fr' },
    { label: 'Japan',         value: 'jp' },
  ];
}

export default {
  data() {
    return {
      options: [
        { label: 'United States', value: 'us' },
        { label: 'Canada',        value: 'ca' },
        { label: 'Germany',       value: 'de' },
        { label: 'Japan',         value: 'jp' },
      ],
    };
  },
  template: `
    <uwc-dropdown
      :options="options"
      placeholder="Select country..."
      filter
      filter-placeholder="Search countries..."
    ></uwc-dropdown>
  `
};

With clear button

Add show-clear to render a × button when a value is selected.

import { LitElement, html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('dropdown-clear-demo')
export class AppDemo extends LitElement {
  static styles = css`
    :host { display: block; }
    p { margin: .75rem 0 0; font-size: .8rem; color: #6b7280; font-family: monospace; }
  `;

  @state() value = null;
  @state() private _event = '';

  options = [
    { label: 'Draft',     value: 'draft'     },
    { label: 'Published', value: 'published' },
    { label: 'Archived',  value: 'archived'  },
  ];

  render() {
    return html`
      <uwc-dropdown
        .options=${this.options}
        .value=${this.value}
        placeholder="Select status..."
        show-clear
        @uwc-change=${(e) => { this.value = e.detail.value; this._event = 'uwc-change'; }}
        @uwc-clear=${()  => { this.value = null;            this._event = 'uwc-clear';  }}>
      </uwc-dropdown>
      <p>${this._event ? 'Last event: ' + this._event + ' / value: ' + JSON.stringify(this.value) : 'Interact to see events'}</p>
    `;
  }
}

import React, { useState } from 'react';
import { UwcDropdown } from '@uwc/components/react';

export default function App() {
  const [value, setValue] = useState(null);
  const options = [
    { label: 'Draft',     value: 'draft'     },
    { label: 'Published', value: 'published' },
    { label: 'Archived',  value: 'archived'  },
  ];
  return (
    <UwcDropdown
      options={options}
      value={value}
      placeholder="Select status..."
      showClear
      onUwcChange={(e) => setValue(e.detail.value)}
      onUwcClear={() => setValue(null)}
    />
  );
}

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-dropdown
      [options]="options"
      [value]="value()"
      placeholder="Select status..."
      show-clear
      (uwc-change)="value.set($event.detail.value)"
      (uwc-clear)="value.set(null)">
    </uwc-dropdown>
  `
})
export class AppComponent {
  readonly value = signal<string | null>(null);
  options = [
    { label: 'Draft',     value: 'draft'     },
    { label: 'Published', value: 'published' },
    { label: 'Archived',  value: 'archived'  },
  ];
}

export default {
  data() {
    return {
      value: null,
      options: [
        { label: 'Draft',     value: 'draft'     },
        { label: 'Published', value: 'published' },
        { label: 'Archived',  value: 'archived'  },
      ],
    };
  },
  template: `
    <uwc-dropdown
      :options="options"
      :value="value"
      placeholder="Select status..."
      show-clear
      @uwc-change="value = $event.detail.value"
      @uwc-clear="value = null"
    ></uwc-dropdown>
  `
};

Multi-select

Add multiple to enable chip-based multi-selection.

import { LitElement, html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('dropdown-multi-demo')
export class AppDemo extends LitElement {
  static styles = css`
    :host { display: block; }
    p { margin: .75rem 0 0; font-size: .875rem; color: #374151; }
  `;

  @state() value = [];

  options = [
    { label: 'HTML',       value: 'html'    },
    { label: 'CSS',        value: 'css'     },
    { label: 'JavaScript', value: 'js'      },
    { label: 'TypeScript', value: 'ts'      },
    { label: 'React',      value: 'react'   },
    { label: 'Vue',        value: 'vue'     },
    { label: 'Angular',    value: 'angular' },
  ];

  render() {
    return html`
      <uwc-dropdown
        .options=${this.options}
        .value=${this.value}
        placeholder="Select technologies..."
        multiple
        show-clear
        filter
        @uwc-change=${(e) => { this.value = e.detail.value; }}>
      </uwc-dropdown>
      <p>Selected: <strong>${this.value && this.value.length ? this.value.join(', ') : 'none'}</strong></p>
    `;
  }
}

import React, { useState } from 'react';
import { UwcDropdown } from '@uwc/components/react';

export default function App() {
  const [value, setValue] = useState([]);
  const options = [
    { label: 'HTML',       value: 'html'    },
    { label: 'CSS',        value: 'css'     },
    { label: 'JavaScript', value: 'js'      },
    { label: 'TypeScript', value: 'ts'      },
    { label: 'React',      value: 'react'   },
    { label: 'Vue',        value: 'vue'     },
  ];
  return (
    <>
      <UwcDropdown
        options={options}
        value={value}
        placeholder="Select technologies..."
        multiple
        showClear
        filter
        onUwcChange={(e) => setValue(e.detail.value)}
      />
      <p>Selected: <strong>{value.length ? value.join(', ') : 'none'}</strong></p>
    </>
  );
}

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-dropdown
      [options]="options"
      [value]="value()"
      placeholder="Select technologies..."
      multiple
      show-clear
      filter
      (uwc-change)="value.set($event.detail.value)">
    </uwc-dropdown>
  `
})
export class AppComponent {
  readonly value = signal<string[]>([]);
  options = [
    { label: 'HTML',       value: 'html'    },
    { label: 'CSS',        value: 'css'     },
    { label: 'JavaScript', value: 'js'      },
    { label: 'TypeScript', value: 'ts'      },
    { label: 'React',      value: 'react'   },
    { label: 'Vue',        value: 'vue'     },
  ];
}

export default {
  data() {
    return {
      value: [],
      options: [
        { label: 'HTML',       value: 'html'    },
        { label: 'CSS',        value: 'css'     },
        { label: 'JavaScript', value: 'js'      },
        { label: 'TypeScript', value: 'ts'      },
        { label: 'React',      value: 'react'   },
        { label: 'Vue',        value: 'vue'     },
      ],
    };
  },
  template: `
    <uwc-dropdown
      :options="options"
      :value="value"
      placeholder="Select technologies..."
      multiple
      show-clear
      filter
      @uwc-change="value = $event.detail.value"
    ></uwc-dropdown>
  `
};

Option groups

Set the group field on an option to render it as a non-selectable section header.

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('dropdown-groups-demo')
export class AppDemo extends LitElement {
  options = [
    { group: 'Fruits',     label: 'Fruits',     value: null },
    { label: 'Apple',      value: 'apple'   },
    { label: 'Banana',     value: 'banana'  },
    { label: 'Cherry',     value: 'cherry'  },
    { group: 'Vegetables', label: 'Vegetables', value: null },
    { label: 'Carrot',     value: 'carrot'  },
    { label: 'Broccoli',   value: 'broccoli'},
  ];
  render() {
    return html`
      <uwc-dropdown .options=${this.options} placeholder="Select food..." filter></uwc-dropdown>
    `;
  }
}

import React from 'react';
import { UwcDropdown } from '@uwc/components/react';

export default function App() {
  const options = [
    { group: 'Fruits',     label: 'Fruits',     value: null },
    { label: 'Apple',      value: 'apple'   },
    { label: 'Banana',     value: 'banana'  },
    { group: 'Vegetables', label: 'Vegetables', value: null },
    { label: 'Carrot',     value: 'carrot'  },
  ];
  return <UwcDropdown options={options} placeholder="Select food..." filter />;
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<uwc-dropdown [options]="options" placeholder="Select food..." filter></uwc-dropdown>`
})
export class AppComponent {
  options = [
    { group: 'Fruits',     label: 'Fruits',     value: null },
    { label: 'Apple',      value: 'apple'   },
    { label: 'Banana',     value: 'banana'  },
    { group: 'Vegetables', label: 'Vegetables', value: null },
    { label: 'Carrot',     value: 'carrot'  },
  ];
}

export default {
  data() {
    return {
      options: [
        { group: 'Fruits',     label: 'Fruits',     value: null },
        { label: 'Apple',      value: 'apple'   },
        { label: 'Banana',     value: 'banana'  },
        { group: 'Vegetables', label: 'Vegetables', value: null },
        { label: 'Carrot',     value: 'carrot'  },
      ],
    };
  },
  template: `
    <uwc-dropdown :options="options" placeholder="Select food..." filter></uwc-dropdown>
  `
};

Loading state

Set loading to show a spinner and block interaction during async data fetching.

import { LitElement, html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('dropdown-loading-demo')
export class AppDemo extends LitElement {
  static styles = css`
    :host { display: block; }
    .row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
  `;

  @state() private _loading = false;
  @state() private _options = [];

  async _load() {
    this._loading = true;
    this._options = [];
    await new Promise(r => setTimeout(r, 1500));
    this._options = [
      { label: 'Result A', value: 'a' },
      { label: 'Result B', value: 'b' },
      { label: 'Result C', value: 'c' },
    ];
    this._loading = false;
  }

  render() {
    return html`
      <div class="row">
        <uwc-dropdown .options=${this._options} ?loading=${this._loading} placeholder="Select..."></uwc-dropdown>
        <uwc-button label="Fetch options" @click=${this._load}></uwc-button>
      </div>
    `;
  }
}

import React, { useState } from 'react';
import { UwcDropdown, UwcButton } from '@uwc/components/react';

export default function App() {
  const [loading, setLoading] = useState(false);
  const [options, setOptions] = useState([]);

  async function load() {
    setLoading(true);
    setOptions([]);
    await new Promise(r => setTimeout(r, 1500));
    setOptions([
      { label: 'Result A', value: 'a' },
      { label: 'Result B', value: 'b' },
    ]);
    setLoading(false);
  }

  return (
    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
      <UwcDropdown options={options} loading={loading} placeholder="Select..." />
      <UwcButton label="Fetch options" onUwcClick={load} />
    </div>
  );
}

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;gap:1rem;align-items:center">
      <uwc-dropdown [options]="options()" [loading]="loading()" placeholder="Select..."></uwc-dropdown>
      <uwc-button label="Fetch options" (click)="load()"></uwc-button>
    </div>
  `
})
export class AppComponent {
  readonly loading = signal(false);
  readonly options = signal<any[]>([]);

  async load() {
    this.loading.set(true);
    this.options.set([]);
    await new Promise(r => setTimeout(r, 1500));
    this.options.set([{ label: 'Result A', value: 'a' }, { label: 'Result B', value: 'b' }]);
    this.loading.set(false);
  }
}

export default {
  data() {
    return {
      loading: false,
      options: [],
    };
  },
  methods: {
    async load() {
      this.loading = true;
      this.options = [];
      await new Promise(r => setTimeout(r, 1500));
      this.options = [{ label: 'Result A', value: 'a' }, { label: 'Result B', value: 'b' }];
      this.loading = false;
    }
  },
  template: `
    <div style="display:flex;gap:1rem;align-items:center">
      <uwc-dropdown :options="options" :loading="loading" placeholder="Select..."></uwc-dropdown>
      <uwc-button label="Fetch options" @click="load"></uwc-button>
    </div>
  `
};

Attributes

Name Type Default Description
options — — SelectOption[] — the option model.
value — — Currently selected value (single) or value[] (multiple).
placeholder — — Trigger placeholder text.
multiple — — Enable multi-select (chips UI).
filter — — Show filter input inside panel.
filter-placeholder — — Placeholder for the filter input. Default: "Search…"
show-clear — — Show clear (×) button when a value is selected.
loading — — Show spinner and disable interaction.
disabled — — Disable the entire component.
scroll-height — — Max panel height (CSS value). Default: 220px.
auto-display-first — — Select first option automatically on mount.
empty-message — — Message shown when filter yields no results.
placement — — Default: bottom-start.
offset — — Gap px. Default: 4.
max-selected-labels — — Max chips shown before collapse label. Default: 3.

Properties

Name Type Default Description
options SelectOption[] [] —
value unknown null —
placement Placement 'bottom-start' —
offset number 4 —
placeholder string 'Select…' —
multiple boolean false —
filter boolean false —
filterPlaceholder string 'Search…' —
showClear boolean false —
loading boolean false —
disabled boolean false —
scrollHeight number 220 —
autoDisplayFirst boolean false —
emptyMessage string 'No results found.' —
maxSelectedLabels number 3 —
styles array [styles] —

Events

Name Type Description
uwc-change CustomEvent — detail: { value, label, originalEvent }
uwc-filter CustomEvent — detail: { query, originalEvent }
uwc-clear CustomEvent — detail: { previousValue }
uwc-focus CustomEvent —
uwc-blur CustomEvent —
uwc-show CustomEvent —
uwc-hide CustomEvent —

CSS Custom Properties

Name Default Description
--uwc-dd-trigger-bg — —
--uwc-dd-trigger-border — —
--uwc-dd-trigger-radius — —
--uwc-dd-trigger-color — —
--uwc-dd-trigger-placeholder-color — —
--uwc-dd-trigger-focus-border — —
--uwc-dd-trigger-open-border — —
--uwc-dd-trigger-disabled-bg — —
--uwc-dd-chip-bg — —
--uwc-dd-chip-color — —
--uwc-dd-panel-bg — —
--uwc-dd-panel-border — —
--uwc-dd-panel-radius — —
--uwc-dd-panel-shadow — —
--uwc-dd-option-hover-bg — —
--uwc-dd-option-selected-bg — —
--uwc-dd-option-selected-color — —
--uwc-dd-option-disabled-color — —
--uwc-dd-group-color — —
--uwc-dd-z — —
--uwc-dd-duration — —

CSS Parts

Name Description
trigger —
label —
chip —
clear-btn —
caret —
panel —
filter-input —
option —
group-header —
empty —
loading-icon —