سلکت بومی (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 استفاده کنید.