دیگ

لیست کشوییv1.0.0

انتخاب یک یا چند گزینه از فهرستی از موارد. محتوای منو با dir="rtl" رندر می‌شود تا نشانگر انتخاب و چیدمان آیتم‌ها هم‌جهت باقی بماند.

شبیه به این هم هست:AutocompleteComboBoxکدام را انتخاب کنم؟
ری‌اکت ۱۹ و Next.js با پیاده‌سازی دسترس‌پذیری داخلی دیگویو ۳ با Composition API — هنوز برای این کامپوننت پورت نشدهSvelte ۵ با runes — هنوز برای این کامپوننت پورت نشدهانگولار با signals و دایرکتیوهای standalone — هنوز برای این کامپوننت پورت نشده

این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.

این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

نصب

با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.

پکیج‌منیجر پیش‌فرض Node.jsنصب سریع با لینک سخت و دیسک مشترکYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیج‌منیجر Bun
npx digdesign@latest add https://docs.digdesign.ir/r/select.json
pnpm dlx digdesign@latest add https://docs.digdesign.ir/r/select.json
yarn dlx digdesign@latest add https://docs.digdesign.ir/r/select.json
bunx --bun digdesign@latest add https://docs.digdesign.ir/r/select.json

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

استفاده

import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select"

<Select>
  <SelectTrigger>
    <SelectValue placeholder="انتخاب کنید" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="a">گزینه ۱</SelectItem>
  </SelectContent>
</Select>

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

ترکیب اجزا

Select از Trigger (دکمه‌ی بازکننده)، Value (نمایش انتخاب فعلی)، Content (پوشش شناور) و Itemها تشکیل شده.

SelectGroup و SelectLabel برای دسته‌بندی گزینه‌ها، و SelectItemDescription برای زیرمتن توضیحی زیر هر گزینه، اختیاری هستند.

دسترس‌پذیری

  • با کلیدهای جهت‌دار بالا/پایین بین گزینه‌ها حرکت می‌کند و با تایپ حروف، به گزینهٔ هم‌نام می‌پرد.
  • چون <html> پیش‌فرض dir="rtl" دارد و خودِ کامپوننت این جهت را از نزدیک‌ترین [dir] می‌خواند، ناوبری با صفحه‌کلید و محل باز شدن منو هم‌جهت با RTL است.
  • در حالت چندانتخابی (multiple)، role روی فهرست به aria-multiselectable مجهز می‌شود و انتخاب هر گزینه فهرست را نمی‌بندد تا کاربر بتواند چند گزینه را پشت‌سرهم انتخاب کند.

مرجع API

Select

ویژگینوعپیش‌فرضتوضیح
dir"rtl" | "ltr""rtl"جهت باز شدن و چیدمان محتوای منو.
namestring—نام فیلد در فرم. Select بر پایهٔ دکمه ساخته شده نه تگ select، پس بدون name مقدار با submit بومی یا FormData ارسال نمی‌شود؛ با name یک input مخفی هم‌نام (در multiple یکی به ازای هر گزینه) مقدار را می‌فرستد.
formstring—شناسهٔ فرم، وقتی Select بیرون از تگ form است.
multiplebooleanfalseفعال‌سازی حالت چندانتخابی؛ در این حالت value/defaultValue/onValueChange به‌جای string از نوع string[] هستند.
valuestring | string[]—مقدار کنترل‌شده، رشته در حالت تک‌انتخابی، آرایه در حالت چندانتخابی (multiple).
defaultValuestring | string[]—مقدار اولیهٔ انتخاب‌شده در حالت کنترل‌نشده، نوعش هم‌راستا با multiple است.
onValueChange(value: string) => void | (value: string[]) => void—فراخوانی هنگام تغییر گزینهٔ انتخاب‌شده.
openboolean—حالت باز/بستهٔ کنترل‌شدهٔ فهرست.
defaultOpenbooleanfalseحالت اولیهٔ باز/بسته در حالت کنترل‌نشده.
onOpenChange(open: boolean) => void—فراخوانی هنگام تغییر حالت باز/بستهٔ فهرست.
disabledbooleanfalseغیرفعال کردن کل لیست کشویی.

SelectValue

ویژگینوعپیش‌فرضتوضیح
chipsbooleanfalseفقط در حالت چندانتخابی: هر گزینهٔ انتخاب‌شده را به‌جای متن به‌هم‌چسبیده، به‌شکل چیپ نشان می‌دهد.
placeholderReactNode—متن جای‌گزین وقتی چیزی انتخاب نشده.

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.