Combobox

نصب

pnpm dlx @simurgh-ui/cli add combobox

import {
  Combobox,
  type ComboboxProps,
  type SelectOption,
} from '@simurgh-ui/react/combobox';
import {
  Combobox as VueCombobox,
  type ComboboxOption,
} from '@simurgh-ui/vue/combobox';
import {
  ComboboxComponent,
  SelectOption as AngularSelectOption,
} from '@simurgh-ui/angular/combobox';
import '@simurgh-ui/styles/combobox.css';

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

Live component Combobox ◆

City

استفاده

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

<Combobox
  name="city"
  value={city}
  onValueChange={setCity}
  placeholder="جست‌وجوی شهر"
  noResults="شهری پیدا نشد"
  options={cities}
/>;

<Combobox
  v-model="city"
  name="city"
  placeholder="جست‌وجوی شهر"
  :options="cities"
/>

<simurgh-combobox
  name="city"
  [(value)]="city"
  placeholder="جست‌وجوی شهر"
  [options]="cities"
/>

صفحه‌کلید

Tab از input وارد و خارج می‌شود. Arrow Down/Up فهرست را باز و option فعال را جابه‌جا می‌کند؛ Home/End به ابتدا و انتها می‌رود؛ Enter انتخاب می‌کند و Escape بدون انتخاب فهرست را می‌بندد. متن input به‌جای typeahead گزینه‌ها را فیلتر می‌کند.

API اصلی

options اجباری است. value، defaultValue، name، required، disabled، placeholder و noResults در adapterها وجود دارند. state انتخاب با callback، v-model یا [(value)] به برنامه متصل می‌شود.

برای مجموعهٔ کوچک بدون جست‌وجو Select ساده‌تر است.

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