Select

نصب

pnpm dlx @simurgh-ui/cli add select

import { Select } from '@simurgh-ui/react/select';
import { Select as VueSelect, SelectOption } from '@simurgh-ui/vue/select';
import {
  SelectComponent,
  SelectOption as AngularSelectOption,
} from '@simurgh-ui/angular/select';
import '@simurgh-ui/styles/select.css';

پیش‌نمایش واقعی

Live component Select ◆

FrameworkReact

استفاده

const cities = [
  { value: 'tehran', label: 'تهران' },
  { value: 'isfahan', label: 'اصفهان' },
];

<Select
  name="city"
  options={cities}
  value={city}
  onValueChange={setCity}
  placeholder="انتخاب شهر"
/>;

<Select
  v-model="city"
  name="city"
  :options="cities"
  placeholder="انتخاب شهر"
/>

<simurgh-select
  name="city"
  [options]="cities"
  [(value)]="city"
  placeholder="انتخاب شهر"
/>

صفحه‌کلید

Tab روی trigger قرار می‌گیرد. Arrow Down/Up فهرست را باز و option فعال را جابه‌جا می‌کند؛ Home/End ابتدا و انتها را انتخاب می‌کند؛ Enter یا Space انتخاب را ثبت و Escape فهرست را بدون تغییر focus می‌بندد.

API و فرم

options آرایه‌ای از SelectOption و اجباری است. value و onValueChange در React، v-model در Vue و [(value)] در Angular state را کنترل می‌کنند. defaultValue حالت اولیه را در React ارائه می‌دهد. name و required در submit بومی شرکت می‌کنند.

برای جست‌وجوی متنی داخل گزینه‌ها از Combobox استفاده کنید.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.