انتخابگر (Select)

import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@partodata/ui'
;<Select defaultValue="option1">
  <SelectTrigger className="w-[220px]">
    <SelectValue placeholder="انتخاب کنید" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">گزینه 1</SelectItem>
    <SelectItem value="option2">گزینه 2</SelectItem>
    <SelectItem value="option3">گزینه 3</SelectItem>
  </SelectContent>
</Select>

<div className="flex flex-col gap-4">
  <Select>
    <SelectTrigger size="xs" className="w-[180px]">
      <SelectValue placeholder="خیلی کوچک (xs)" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="1">گزینه 1</SelectItem>
    </SelectContent>
  </Select>

  <Select>
    <SelectTrigger size="sm" className="w-[180px]">
      <SelectValue placeholder="کوچک (sm) — نوار ابزار" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="1">گزینه 1</SelectItem>
    </SelectContent>
  </Select>

  <Select>
    <SelectTrigger size="md" className="w-[180px]">
      <SelectValue placeholder="متوسط (md) — پیش‌فرض" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="1">گزینه 1</SelectItem>
    </SelectContent>
  </Select>

  <Select>
    <SelectTrigger size="lg" className="w-[180px]">
      <SelectValue placeholder="بزرگ (lg)" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="1">گزینه 1</SelectItem>
    </SelectContent>
  </Select>

  <Select>
    <SelectTrigger size="xl" className="w-[180px]">
      <SelectValue placeholder="خیلی بزرگ (xl)" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="1">گزینه 1</SelectItem>
    </SelectContent>
  </Select>
</div>

<div className="space-y-2">
  <label htmlFor="framework">فریمورک</label>
  <Select>
    <SelectTrigger id="framework" className="w-[180px]">
      <SelectValue placeholder="انتخاب فریمورک" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="next">Next.js</SelectItem>
      <SelectItem value="react">React</SelectItem>
      <SelectItem value="vue">Vue</SelectItem>
      <SelectItem value="svelte">Svelte</SelectItem>
    </SelectContent>
  </Select>
</div>

const [value, setValue] = React.useState('')

;<Select value={value} onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="انتخاب کنید" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">سیب</SelectItem>
    <SelectItem value="banana">موز</SelectItem>
    <SelectItem value="orange">پرتقال</SelectItem>
  </SelectContent>
</Select>

import { SelectGroup, SelectLabel } from '@partodata/ui'
;<Select>
  <SelectTrigger className="w-[280px]">
    <SelectValue placeholder="انتخاب میوه" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>میوه‌های استوایی</SelectLabel>
      <SelectItem value="banana">موز</SelectItem>
      <SelectItem value="pineapple">آناناس</SelectItem>
      <SelectItem value="mango">انبه</SelectItem>
    </SelectGroup>
    <SelectGroup>
      <SelectLabel>میوه‌های معمولی</SelectLabel>
      <SelectItem value="apple">سیب</SelectItem>
      <SelectItem value="orange">پرتقال</SelectItem>
      <SelectItem value="grape">انگور</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

<Select>
  <SelectTrigger>
    <SelectValue placeholder="انتخاب کنید" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">گزینه 1</SelectItem>
    <SelectItem value="option2" disabled>
      گزینه 2 (غیرفعال)
    </SelectItem>
    <SelectItem value="option3">گزینه 3</SelectItem>
  </SelectContent>
</Select>