قائمة منسدلة بالبحث (Combobox)

يتيح لك مكوّن قائمة منسدلة بالبحث (Combobox) البحث في الخيارات، واختيار عدة خيارات، وإنشاء خيار جديد.

التثبيت

bash

npx @smicolon/cli add combobox

قبل إضافة أي مكوّن، شغّل الأمر init مرة واحدة في مشروعك. التفاصيل في صفحة التثبيت.

معاينة

مع البحث

اختيار متعدد

إنشاء خيار جديد

الحالات

الخصائص (props)

الخاصية	النوع	الافتراضي	الوصف
`options`	`ComboboxOption[]`	لا يوجد	الخيارات المتاحة للاختيار.
`value`	`string \| string[]`	لا يوجد	القيمة المحددة، أو القيم مع `multiple`.
`onChange`	`(value) => void`	لا يوجد	تُستدعى عند تغيير الاختيار.
`placeholder`	`string`	`"Select option..."`	نص يظهر قبل الاختيار.
`searchPlaceholder`	`string`	`"Search..."`	نص يظهر في حقل البحث.
`multiple`	`boolean`	`false`	يسمح باختيار عدة خيارات.
`creatable`	`boolean`	`false`	يتيح إضافة خيار جديد.
`onCreate`	`(value) => void`	لا يوجد	تُستدعى بنص الخيار الجديد.
`emptyText`	`string`	`"No options found."`	نص يظهر حين لا تطابق النتائج.
`createText`	`string`	`"Create"`	تسمية خيار الإضافة.
`loading`	`boolean`	`false`	يعرض حالة التحميل.
`loadingText`	`string`	`"Loading..."`	نص يظهر أثناء التحميل.
`openLabel`	`string`	`"Open"`	اسم زر الفتح لقارئ الشاشة.
`closeLabel`	`string`	`"Close"`	اسم زر الإغلاق لقارئ الشاشة.
`removeLabel`	`(label) => string`	لا يوجد	اسم زر إزالة الخيار المحدد.
`disabled`	`boolean`	`false`	يعطّل القائمة ويُظهرها باهتة.
`className`	`string`	لا يوجد	أصناف (class) إضافية للمكوّن.

الاستخدام

tsx

import { Combobox } from "@/components/ui/combobox"

const options = [
  { value: "sa", label: "السعودية" },
  { value: "ae", label: "الإمارات" },
  { value: "eg", label: "مصر" },
]

// قائمة منسدلة بالبحث بسيطة
<Combobox
  options={options}
  placeholder="اختر خيارًا…"
/>

// التحكّم بالقيمة مع البحث
const [value, setValue] = useState("")

<Combobox
  options={options}
  value={value}
  onChange={setValue}
/>

// اختيار متعدد
<Combobox
  options={options}
  multiple
  value={selectedValues}
  onChange={setSelectedValues}
/>

// إنشاء خيار جديد
<Combobox
  options={options}
  creatable
  onCreate={(value) => {
    // أضف الخيار الجديد إلى قائمتك
  }}
/>