ElyriSelect
下拉选择：listbox 语义浮层，方向键 / Home / End / typeahead 导航，Esc 关闭；multiple 切换为多选 Tag 形态。
安装
添加组件
pnpm dlx @elyri/cli@latest add select示例
基础用法
点击或按方向键展开，选择后自动收起并把焦点还给触发器。
Pick a fruit
import { Select } from './components/elyri/Select';
export function Example() {
return (
<Select placeholder="Pick a fruit">
<Select.Trigger />
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="banana">Banana</Select.Item>
<Select.Item value="cherry">Cherry</Select.Item>
</Select.Content>
</Select>
);
}可搜索
在 Trigger 内放 Select.Search，触发器变为可输入，输入即按文案过滤选项。
import { Select } from './components/elyri/Select';
export function Example() {
return (
<Select placeholder="Pick a fruit">
<Select.Trigger>
<Select.Search placeholder="搜索水果" />
</Select.Trigger>
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="banana">Banana</Select.Item>
<Select.Item value="cherry">Cherry</Select.Item>
</Select.Content>
</Select>
);
}受控用法
value 与 onValueChange 驱动。
Apple
import { useState } from 'react';
import { Select } from './components/elyri/Select';
export function Example() {
const [value, setValue] = useState('apple');
return (
<Select value={value} onValueChange={setValue}>
<Select.Trigger />
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="banana">Banana</Select.Item>
</Select.Content>
</Select>
);
}多选
multiple 模式下选项点击不收起，选中项以 Tag 展示，可单独移除或一键清空。
AppleBanana
import { Select } from './components/elyri/Select';
export function Example() {
return (
<Select multiple placeholder="Pick fruits" defaultValue={['apple', 'banana']}>
<Select.Trigger />
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="banana">Banana</Select.Item>
<Select.Item value="cherry">Cherry</Select.Item>
</Select.Content>
</Select>
);
}尺寸
三档尺寸与 Input 对齐：sm / md / lg。
Pick a fruit
Pick a fruit
Pick a fruit
import { Select } from './components/elyri/Select';
export function Example() {
return (
<div>
<Select size="sm" placeholder="Small">
<Select.Trigger />
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
</Select.Content>
</Select>
<Select size="lg" placeholder="Large">
<Select.Trigger />
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
</Select.Content>
</Select>
</div>
);
}禁用
整个下拉不可交互。
Pick a fruit
import { Select } from './components/elyri/Select';
export function Example() {
return (
<Select disabled placeholder="Pick a fruit">
<Select.Trigger />
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
</Select.Content>
</Select>
);
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | string | string[] | — | 受控选中值：单选 string，多选 string[] |
defaultValue | string | string[] | — | 非受控初始值 |
onValueChange | (value: string | string[]) => void | — | 选中值变化回调：单选回传 string，多选回传 string[] |
multiple | boolean | false | 多选模式：值为 string[]，Trigger 以 Tag 展示 |
placeholder | string | — | 未选中时的占位文案 |
size | 'sm' | 'md' | 'lg' | 'md' | Trigger 尺寸：sm / md / lg |
placement | 'top' | 'bottom' | 'left' | 'right' | 'bottom' | 期望方向：top / bottom / left / right，默认 bottom |
open | boolean | — | 受控开关；配合 onOpenChange 使用 |
clearLabel | string | 'Clear' | 多选清空按钮的无障碍名称，默认 "Clear" |
filter | (label: string, query: string) => boolean | — | 自定义搜索匹配；默认按文案做大小写不敏感的包含匹配 |
onSearchChange | (query: string) => void | — | 搜索关键词变化回调，可配合自定义 / 异步过滤 |