انتخابگر (Select)

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from '@parto/ui';

<Select defaultValue="option1">
  <SelectTrigger className="w-[220px]">
    <SelectValue placeholder="انتخاب کنید" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">گزینه ۱</SelectItem>
    <SelectItem value="option2">گزینه ۲</SelectItem>
    <SelectItem value="option3">گزینه ۳</SelectItem>
  </SelectContent>
</Select>

<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 '@parto/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">گزینه ۱</SelectItem>
    <SelectItem value="option2" disabled>
      گزینه ۲ (غیرفعال)
    </SelectItem>
    <SelectItem value="option3">گزینه ۳</SelectItem>
  </SelectContent>
</Select>