Select — انتخاب‌گر

انتخاب‌گر یک فهرست باز شونده برای انتخاب یک گزینه است: دسته‌بندی، کشور، واحد. برای گزینه‌های کم که همه باید دیده شوند، RadioGroup مناسب‌تر است. برای ورود آزاد متن از Input استفاده کنید.

وضعیت: beta · لایه: ۳ (@tokapps/tukکپی کد) · کد: packages/tuk/src/controls/select/کپی کد

import { Select } from '@tokapps/tuk';

نمونهٔ زنده

گزینهٔ «حقوقی» در نمونه غیرفعال است؛ فهرست را باز کنید و با فلش‌ها حرکت کنید.

پلی‌گراند و همهٔ پیکربندی‌ها

نوع، اندازه و حالت‌ها را عوض کنید؛ پیش‌نمایش و کد قابل کپی از همان پیکربندی ساخته می‌شوند. برای هر نوع (ساده، جست‌وجو، چندانتخابی، وابسته، مودال طبقه‌بندی‌شده، برگهٔ داک) کد کامل و قابل اجرا آماده است.

import { SearchSelect, type SelectOption } from '@tokapps/tuk';const provinces: SelectOption[] = [  { id: 'tehran', label: 'تهران' },  { id: 'yazd', label: 'یزد' },  { id: 'kerman', label: 'کرمان' },];export function Example() {  return (    <SearchSelect      label="استان"      options={provinces}      searchPlaceholder="جستجو…"    />  );}

انتخاب‌گرهای تخصصی

• جست‌وجو و چندانتخابی: SearchSelectکپی کد با selectionMode="multiple"کپی کد؛ جست‌وجو فارسی‌نرمال است (ی/ک، نیم‌فاصله).
• وابسته: useDependentSelectکپی کد (استان ← شهر)؛ با تغییر والد، فرزند پاک می‌شود.
• مودال طبقه‌بندی‌شده: CategorizedSelectکپی کد؛ گزینه‌ها با groupکپی کد دسته‌بندی و با انتخاب، مودال بسته می‌شود.
• برگهٔ داک: DockSheetSelectکپی کد؛ گزینه‌ها روی داک شیشه‌ای پایین (باتن‌شیت) و با انتخاب بسته می‌شوند.

کد قابل کپی

فهرست ساده

import { Select, type SelectOption } from '@tokapps/tuk';const options: SelectOption[] = [  { id: 'design', label: 'طراحی' },  { id: 'dev', label: 'توسعه (Development)', description: 'وب، موبایل و API' },  { id: 'legal', label: 'حقوقی', disabled: true },];<Select label="دسته‌بندی" options={options} onSelectionChange={(key) => setCategory(key)} />

مقدار اولیه و الزامی با خطا

<Select  name="category"  label="دسته‌بندی"  options={options}  defaultSelectedKey="design"  isRequired  isInvalid={!category}  errorMessage="یک دسته انتخاب کنید"/>

فقط‌خواندنی (مقدار دیده می‌شود، باز نمی‌شود)

<Select label="دسته‌بندی" options={options} isReadOnly defaultSelectedKey="dev" />

همهٔ پیکربندی‌ها

Select

SelectOption (هر گزینه)

حالت‌ها

RTL و کیبورد

• فهرست در RTL از سمت راست هم‌تراز می‌شود و فلش‌ها جهت را برعکس می‌کنند.
• Enterکپی کد/Spaceکپی کد باز و انتخاب می‌کند؛ ↑کپی کد/↓کپی کد حرکت می‌کنند؛ Escapeکپی کد می‌بندد و فوکوس را به کنترل برمی‌گرداند.
• نقش buttonکپی کد با aria-haspopup="listbox"کپی کد؛ فهرست با نقش listboxکپی کد خوانده می‌شود.

صدا، حرکت، چاپ

• صدا: پیش‌فرض tapکپی کد هنگام انتخاب گزینه؛ معادل بصری: برچسب جدید در کنترل.
• حرکت: باز شدن فهرست با توکن‌های overlayکپی کد؛ در کاهش حرکت بدون انیمیشن.
• چاپ: print="show"کپی کد پیش‌فرض؛ فقط مقدار انتخاب‌شده چاپ می‌شود.

توکن‌ها

• کامپوننتی: --tds-select-bgکپی کد، --tds-select-borderکپی کد (-hoverکپی کد، -invalidکپی کد)، --tds-select-radiusکپی کد، --tds-select-placeholderکپی کد، --tds-select-item-bg-focusکپی کد و -selectedکپی کد، --tds-select-item-padding-inlineکپی کد، --tds-select-popover-*کپی کد (پس‌زمینه، حاشیه، شعاع، سایه، ارتفاع بیشینه، فاصلهٔ داخلی)، --tds-select-gapکپی کد، --tds-select-field-gapکپی کد، --tds-select-label-weightکپی کد، --tds-select-disabled-opacityکپی کد، --tds-select-transitionکپی کد.
• تعریف در packages/tokens/src/component/select.cssکپی کد؛ فهرست کامل در Select.tokens.tsکپی کد.

نکات

• برای فهرست‌های خیلی بلند یا جستجوی آزاد، از CommandMenu (جستجوی فرمان) یا یک فیلد جستجو کمک بگیرید.
• اگر گزینه‌ها سه یا کمتر هستند و باید همه دیده شوند، RadioGroup را ببینید.