پرتوپرتو

سلکت بومی (Native Select)

یک select بومی HTML با استایل بهتر

معرفی

کامپوننت Native Select یک المان select بومی HTML است که با استایل بهتر و سازگار با design system ارائه شده است.

استفاده

import { NativeSelect, NativeSelectOption } from '@parto/ui';

export default function MyComponent() {
  return (
    <NativeSelect>
      <NativeSelectOption value="">انتخاب کنید</NativeSelectOption>
      <NativeSelectOption value="1">گزینه ۱</NativeSelectOption>
      <NativeSelectOption value="2">گزینه ۲</NativeSelectOption>
      <NativeSelectOption value="3">گزینه ۳</NativeSelectOption>
    </NativeSelect>
  );
}

با OptGroup

<NativeSelect>
  <NativeSelectOptGroup label="گروه اول">
    <NativeSelectOption value="1">گزینه ۱</NativeSelectOption>
    <NativeSelectOption value="2">گزینه ۲</NativeSelectOption>
  </NativeSelectOptGroup>
  <NativeSelectOptGroup label="گروه دوم">
    <NativeSelectOption value="3">گزینه ۳</NativeSelectOption>
    <NativeSelectOption value="4">گزینه ۴</NativeSelectOption>
  </NativeSelectOptGroup>
</NativeSelect>

غیرفعال

<NativeSelect disabled>
  <NativeSelectOption>غیرفعال</NativeSelectOption>
</NativeSelect>

با خطا

<NativeSelect aria-invalid="true">
  <NativeSelectOption>انتخاب کنید</NativeSelectOption>
</NativeSelect>

مزایا

  • سرعت بارگذاری بالا
  • عملکرد بومی دستگاه
  • مصرف حافظه کم
  • سازگاری کامل با مرورگرها
  • دسترسی‌پذیری بهتر

کاربردها

  • فرم‌های ساده
  • انتخاب سریع
  • دستگاه‌های موبایل
  • وقتی نیاز به جستجو نیست

مقایسه با Select

برای موارد پیچیده‌تر مثل جستجو، multi-select یا سفارشی‌سازی بیشتر، از کامپوننت Select استفاده کنید.