انتخابگر بومی (Native Select)

1import {
2  NativeSelect,
3  NativeSelectOption,
4} from "@/components/ui/native-select";
5
6export default function BasicExample() {
7  return (
8    <NativeSelect>
9      <NativeSelectOption value="">انتخاب کنید...</NativeSelectOption>
10      <NativeSelectOption value="option1">گزینه ۱</NativeSelectOption>
11      <NativeSelectOption value="option2">گزینه ۲</NativeSelectOption>
12      <NativeSelectOption value="option3">گزینه ۳</NativeSelectOption>
13    </NativeSelect>
14  );
15}
16

1import {
2  NativeSelect,
3  NativeSelectOption,
4} from "@/components/ui/native-select";
5import { Label } from "@/components/ui/label";
6
7export default function WithLabelExample() {
8  return (
9    <div className="space-y-2">
10      <Label htmlFor="fruit">میوه مورد علاقه</Label>
11      <NativeSelect id="fruit">
12        <NativeSelectOption value="">انتخاب میوه</NativeSelectOption>
13        <NativeSelectOption value="apple">سیب</NativeSelectOption>
14        <NativeSelectOption value="banana">موز</NativeSelectOption>
15        <NativeSelectOption value="orange">پرتقال</NativeSelectOption>
16      </NativeSelect>
17    </div>
18  );
19}
20

1import {
2  NativeSelect,
3  NativeSelectOption,
4  NativeSelectOptGroup,
5} from "@/components/ui/native-select";
6import { Label } from "@/components/ui/label";
7
8export default function GroupsExample() {
9  return (
10    <div className="space-y-2">
11      <Label htmlFor="cars">انتخاب خودرو</Label>
12      <NativeSelect id="cars">
13        <NativeSelectOption value="">انتخاب کنید...</NativeSelectOption>
14        <NativeSelectOptGroup label="آلمانی">
15          <NativeSelectOption value="mercedes">مرسدس بنز</NativeSelectOption>
16          <NativeSelectOption value="bmw">بی‌ام‌و</NativeSelectOption>
17          <NativeSelectOption value="audi">آئودی</NativeSelectOption>
18        </NativeSelectOptGroup>
19        <NativeSelectOptGroup label="ژاپنی">
20          <NativeSelectOption value="toyota">تویوتا</NativeSelectOption>
21          <NativeSelectOption value="honda">هوندا</NativeSelectOption>
22          <NativeSelectOption value="nissan">نیسان</NativeSelectOption>
23        </NativeSelectOptGroup>
24      </NativeSelect>
25    </div>
26  );
27}
28

1import {
2  NativeSelect,
3  NativeSelectOption,
4} from "@/components/ui/native-select";
5import { Label } from "@/components/ui/label";
6
7export default function SizesExample() {
8  return (
9    <div className="space-y-8">
10      <div className="space-y-2">
11        <Label>Small (sm) - پیش‌فرض</Label>
12        <NativeSelect size="sm">
13          <NativeSelectOption value="sm">گزینه کوچک</NativeSelectOption>
14        </NativeSelect>
15      </div>
16      <div className="space-y-2">
17        <Label>Medium (md)</Label>
18        <NativeSelect size="md">
19          <NativeSelectOption value="md">گزینه متوسط</NativeSelectOption>
20        </NativeSelect>
21      </div>
22      <div className="space-y-2">
23        <Label>Large (lg)</Label>
24        <NativeSelect size="lg">
25          <NativeSelectOption value="lg">گزینه بزرگ</NativeSelectOption>
26        </NativeSelect>
27      </div>
28    </div>
29  );
30}
31

1import {
2  NativeSelect,
3  NativeSelectOption,
4} from "@/components/ui/native-select";
5import { Label } from "@/components/ui/label";
6
7export default function DisabledExample() {
8  return (
9    <div className="space-y-2">
10      <Label htmlFor="disabled">غیرفعال</Label>
11      <NativeSelect id="disabled" disabled>
12        <NativeSelectOption value="">این فیلد غیرفعال است</NativeSelectOption>
13      </NativeSelect>
14    </div>
15  );
16}
17

1import {
2  NativeSelect,
3  NativeSelectOption,
4} from "@/components/ui/native-select";
5import { Label } from "@/components/ui/label";
6
7export default function ValidationExample() {
8  return (
9    <div className="space-y-2">
10      <Label htmlFor="invalid" className="text-destructive">
11        انتخاب نامعتبر
12      </Label>
13      <NativeSelect
14        id="invalid"
15        aria-invalid="true"
16        className="border-destructive focus-visible:ring-destructive"
17      >
18        <NativeSelectOption value="">انتخاب کنید...</NativeSelectOption>
19        <NativeSelectOption value="1">گزینه ۱</NativeSelectOption>
20        <NativeSelectOption value="2">گزینه ۲</NativeSelectOption>
21      </NativeSelect>
22      <p className="text-sm text-destructive">
23        لطفاً یک گزینه معتبر انتخاب کنید.
24      </p>
25    </div>
26  );
27}
28