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.

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	—
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)	—	—

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)

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.