سلکت بومی (NativeSelect)

import { NativeSelect, NativeSelectOption } from '@partodata/ui'

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

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

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

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

<div className="flex flex-col gap-4" dir="rtl">
  <NativeSelect>
    <NativeSelectOption value="">انتخاب کنید...</NativeSelectOption>
    <NativeSelectOption value="1">گزینه اول</NativeSelectOption>
  </NativeSelect>
  <NativeSelect disabled>
    <NativeSelectOption>غیرفعال</NativeSelectOption>
  </NativeSelect>
  <NativeSelect aria-invalid="true">
    <NativeSelectOption>با خطا</NativeSelectOption>
  </NativeSelect>
</div>

<div className="flex flex-col gap-4" dir="rtl">
  <NativeSelect size="xs">
    <NativeSelectOption value="1">فشرده (xs)</NativeSelectOption>
  </NativeSelect>
  <NativeSelect size="sm">
    <NativeSelectOption value="1">نوار ابزار (sm)</NativeSelectOption>
  </NativeSelect>
  <NativeSelect>
    <NativeSelectOption value="1">پیش‌فرض (md)</NativeSelectOption>
  </NativeSelect>
  <NativeSelect size="lg">
    <NativeSelectOption value="1">بزرگ (lg)</NativeSelectOption>
  </NativeSelect>
</div>