Select

A dropdown selector supporting single/multiple selection, groups, clearable, remote search, and custom creation, with full keyboard operation.

Single Select

Single select

Example

Preset Value

Preset value

Example

Multiple Select

Multiple

Example

In multiple mode value is a JSON array; selected items are shown as tags that can be removed individually. Tags wrap to new lines by default and the trigger grows with the content (no collapsing unless max-tag-count is set).

Disabled

Disabled

Example

Empty State

No data

Example

When options are empty, the dropdown shows "暂无数据".

Searchable

Searchable

Example

Once opened, you can type directly to filter; when nothing matches, "无匹配选项" is shown.

Groups

Grouped

Example

Grouped multiple

Example

Options carrying a group field are rendered under a group title (not selectable), with items indented; keyboard ↑/↓ navigates continuously across groups.

Clearable

Clearable

Example

When a value is selected, a clear button appears; clicking clears the value and dispatches oas-clear and oas-change.

Remote Search

Remote search (remote + loading)

Example

In remote mode the component does no local filtering: typing dispatches oas-input for the host to request data, and the host sets loading during the request to show a loading placeholder. This example simulates an 800ms delayed filter:

Remote loading placeholder

Example

Tag Collapse

Tag collapse (max-tag-count)

Example

Multiple-select tags wrap by default and do not collapse; only when max-tag-count is explicitly set do they collapse into +N (hover to see the remaining items).

Allow Create

Allow create

Example

When search yields no match, a "创建 xxx" item is shown; clicking or pressing Enter creates a new option from the input value and selects it.

Custom Option Rendering

Custom options (icons + rich text)

Example

Listen to oas-option-render (each option row) and oas-tag-render (multi-select tags); detail.element is the corresponding text container that the host can rewrite into any content (icons, rich text). You can also put <template slot="option"> / <template slot="tag"> inside the component for a static skeleton — [data-option-label] / [data-tag-label] nodes get bound to the option/tag text automatically.

Large Datasets (Virtual Scrolling)

10k options virtual scrolling

Example

With virtual set, only the visible window is rendered (reusing the oas-virtual-list window math; leading/trailing padding carries the scroll height) — 10k options scroll smoothly. item-height tunes the fixed row height (default 36). Keyboard ↑/↓ scrolling follows the highlighted item and aria-activedescendant keeps pointing at a visible row; options with a group field fall back to full rendering.

Events

Change events

Example

Listen to oas-change; detail.value is a string for single select and an array for multiple:

API

Attributes

Attribute	Description	Type	Default
allow-create	Allow creating new options from the input value when nothing matches	boolean	—
clearable	Clearable (shows a clear button when a value exists; clearing dispatches oas-clear)	boolean	—
disabled	Disabled	boolean	—
item-height	Fixed row height (px) when virtual scrolling	string	36
loading	Remote loading placeholder (use with remote)	boolean	—
max-tag-count	Collapse tags beyond this count into +N in multiple mode (opt-in; without it tags wrap instead of collapsing)	boolean	—
multiple	Multiple select	boolean	—
options	Options, JSON array [{ label, value, disabled?, group? }]	Option[] | string	[]
placeholder	Placeholder text	—	—
remote	Remote search: no local filtering, typing dispatches oas-input for the host to request	boolean	—
searchable	Searchable (type to filter after opening the dropdown)	boolean	—
value	Current value (JSON array in multiple mode)	—	—
virtual	Virtual scrolling for large datasets: renders only the visible window (reuses oas-virtual-list); options with a group field fall back to full rendering	boolean	—

Events

Event	Description
oas-change	Selection/clear change, detail: { value }
oas-clear	Clear button clicked, detail: { value } (value before clearing)
oas-input	Input in remote mode, detail: { value } (for host requests)
oas-option-render	Dispatched for each rendered option row, detail: { index, option, element } (element is the option label container; host can rewrite it into icon/rich text)
oas-tag-render	Dispatched when a multi-select tag renders, detail: { value, label, element } (element is the tag text container; host can rewrite it)

Slots

Name	Description
template[slot="option"]	Static option row template, cloned into each option label container; [data-option-label] nodes get bound to the option label
template[slot="tag"]	Static multi-select tag template, cloned into each chip text container; [data-tag-label] nodes get bound to the tag label

Options carrying a group field are rendered under a group title (not selectable), items are indented; keyboard navigation continues across groups.

Keyboard: Enter / ↓ to open, ↑/↓ to move the highlight (works inside the search box too), Enter to select, Esc to close.