Native Select

نصب

pnpm dlx @simurgh-ui/cli add native-select

import { NativeSelect } from '@simurgh-ui/react/native-select';
import { NativeSelect as VueNativeSelect } from '@simurgh-ui/vue/native-select';
import { NativeSelectComponent } from '@simurgh-ui/angular/native-select';
import '@simurgh-ui/styles/native-select.css';

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

Live component Native Select ◆

TimezoneUTCTehranTokyo

استفاده

<Label htmlFor="timezone">منطقهٔ زمانی</Label>
<NativeSelect id="timezone" name="timezone" defaultValue="tehran" required>
  <option value="utc">UTC</option>
  <option value="tehran">تهران</option>
</NativeSelect>

<simurgh-label for="timezone">منطقهٔ زمانی</simurgh-label>
<simurgh-native-select
  id="timezone"
  name="timezone"
  [value]="timezone"
  [required]="true"
  (valueChange)="timezone = $event"
>
  <option value="utc">UTC</option>
  <option value="tehran">تهران</option>
</simurgh-native-select>

state، فرم و دسترس‌پذیری

React از قرارداد بومی select، Vue از v-model و Angular از value/valueChange استفاده می‌کنند. name و required مستقیماً در فرم شرکت می‌کنند. یک Label متصل و option placeholder غیرفعال برای «انتخاب کنید» ارائه دهید.

Native Select بهترین سازگاری platform و assistive technology را دارد. وقتی search، option سفارشی یا positioning لازم است از Select یا Combobox استفاده کنید.

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