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

التثبيت

bash

npx @smicolon/fasla-ui@latest 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 cities = [
  { value: "riyadh", label: "الرياض" },
  { value: "jeddah", label: "جدة" },
  { value: "dammam", label: "الدمام" },
]

export function CitySelect() {
  return (
    <Select
      name="city"
      aria-label="المدينة"
      options={cities}
      placeholder="اختر مدينة"
    />
  )
}

أحجام مختلفة

tsx

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

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

export function CitySelectSizes() {
  return (
    <div className="flex flex-col gap-4">
      <Select aria-label="المدينة" options={cities} selectSize="sm" />
      <Select aria-label="المدينة" options={cities} selectSize="default" />
      <Select aria-label="المدينة" options={cities} selectSize="lg" />
    </div>
  )
}

حالة الخطأ

tsx

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

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

export function CitySelectWithError() {
  return <Select name="city" aria-label="المدينة" options={cities} error aria-invalid />
}