قائمة منسدلة (Select) لتطبيقات React

التثبيت

bash

npx @smicolon/cli add select

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

معاينة

الأحجام

الحالات

الخصائص (props)

الخاصية	النوع	الافتراضي	الوصف
`options`	`SelectOption[]`	لا يوجد	الخيارات المتاحة للاختيار.
`placeholder`	`string`	لا يوجد	نص يظهر قبل الاختيار.
`selectSize`	`"sm" \| "default" \| "lg"`	`"default"`	حجم القائمة.
`error`	`boolean`	`false`	يعلّم القائمة بأنها غير صالحة.
`disabled`	`boolean`	`false`	يعطّل القائمة ويُظهرها باهتة.
`value`	`string`	لا يوجد	القيمة المحددة، وتُستخدم مع `onChange`.
`name`	`string`	لا يوجد	الاسم الذي يُرسَل مع النموذج.
`onChange`	`(event) => void`	لا يوجد	تُستدعى عند تغيير الاختيار.
`className`	`string`	لا يوجد	أصناف (class) إضافية للمكوّن.

الاستخدام

tsx

import { Select } from "@/components/ui/select"

const options = [
  { value: "riyadh", label: "الرياض" },
  { value: "jeddah", label: "جدة" },
  { value: "dammam", label: "الدمام" },
]

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

// أحجام مختلفة
<Select options={options} selectSize="sm" />
<Select options={options} selectSize="default" />
<Select options={options} selectSize="lg" />

// حالة الخطأ
<Select options={options} error />