ElyriSelect
A listbox-style select with arrow keys, Home / End and typeahead navigation; multiple switches to a tag-based multi-select.
Installation
Add component
pnpm dlx @elyri/cli@latest add selectExamples
Basic
Open by click or arrow key; picking an option closes the list and returns focus to the trigger.
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>
);
}Searchable
Put Select.Search inside the trigger to type and filter options by their label.
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>
);
}Controlled
Driven by value and 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
In multiple mode options stay open, selections render as removable tags with a clear-all button.
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>
);
}Sizes
Three sizes matching 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>
);
}Disabled
The whole select stops responding.
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>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | string[] | — | Controlled value: string for single, string[] with multiple |
defaultValue | string | string[] | — | Initial value when uncontrolled |
onValueChange | (value: string | string[]) => void | — | Called with a string, or string[] in multiple mode |
multiple | boolean | false | Multi-select mode: string[] value, tags in the trigger |
placeholder | string | — | Placeholder text when nothing is selected |
size | 'sm' | 'md' | 'lg' | 'md' | Trigger size: sm / md / lg |
placement | 'top' | 'bottom' | 'left' | 'right' | 'bottom' | Preferred side: top / bottom / left / right, default bottom |
open | boolean | — | Controlled open state; pair with onOpenChange |
clearLabel | string | 'Clear' | Accessible name of the clear button, default "Clear" |
filter | (label: string, query: string) => boolean | — | Custom match; defaults to a case-insensitive contains on the label |
onSearchChange | (query: string) => void | — | Called with the search query; pair with custom or async filtering |