Select

التثبيتنسخ رابط العنوان

ويثبّت Field أيضًا. هذا هو Dropdown Input في DGA (القائمة المنسدلة)؛ وسمّيناه Select تيمّنًا بجزء Base UI.

الاستخدامنسخ رابط العنوان

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

const services = [
  { value: "issue", label: "إصدار رخصة" },
  { value: "renew", label: "تجديد رخصة" },
];

export function ServiceField() {
  return (
    <Field name="service">
      <FieldLabel required>الخدمة</FieldLabel>
      <Select items={services} required>
        <SelectTrigger>
          <SelectValue placeholder="اختر خدمة" />
        </SelectTrigger>
        <SelectContent>
          {services.map((s) => (
            <SelectItem key={s.value} value={s.value}>
              {s.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </Field>
  );
}

استخدم Select لاختيار خيار واحد من خمسة إلى خمسة عشر. وللأقل من ذلك يعرض Radio كل الخيارات معًا؛ وللأكثر أضف حقل بحث. مرّر items ليعرض الزر تسمية القيمة المختارة، وplaceholder يوضح ما المطلوب اختياره.

البنيةنسخ رابط العنوان

• الزر (<button>): الحد والتسمية المختارة أو النص التلميحي وسهم.
• المحتوى: القائمة المنبثقة على سطح البطاقة وبعرض الزر.
• الخيار: خيار واحد، وعليه علامة صح في جهة النهاية عند اختياره.
• المجموعة والتسمية والفاصل (اختيارية): تجمع الخيارات المترابطة.

أمثلةنسخ رابط العنوان

الأساسينسخ رابط العنوان

انقر للفتح، أو ركّز عليه واضغط Enter أو Space أو ArrowDown.

الحالاتنسخ رابط العنوان

الافتراضية والمعبأة وللقراءة فقط والمعطّلة وحالة الخطأ، والحجم المتوسط مع التعبئة الأغمق.

المجموعاتنسخ رابط العنوان

لفّ الخيارات المترابطة في SelectGroup مع SelectLabel، وافصل بين المجموعات بـ SelectSeparator.

RTLنسخ رابط العنوان

يبدأ نص الزر من اليمين ويقع السهم على اليسار. وتفتح القائمة أسفل الزر وتُحاذى بحافة بدايته (اليمنى)؛ وتقع علامة الصح على اليسار.

إمكانية الوصولنسخ رابط العنوان

• للزر الدور combobox مع aria-expanded؛ وللقائمة الدور listbox ولكل خيار الدور option مع aria-selected.
• تأتي التسمية من Field. ويرتبط النص المساعد والأخطاء عبر aria-describedby.
• للخيار المميّز شريط بسمك 2px مع تظليل، لا تظليل وحده (WCAG 2.4.7). وللخيار المختار علامة صح.
• تحتفظ كل الحالات بحد بنسبة 3:1 ونص بنسبة 4.5:1، فاتحًا وداكنًا.

مرجع APIنسخ رابط العنوان

الاختلافات عن DGAنسخ رابط العنوان

• سمّيناه Select (في Figma: Dropdown Input). يرسم Figma القائمة المفتوحة فقط؛ وسطح القائمة المنبثقة من عندنا.
• للخيار المميّز شريط مع التظليل، لأن التظليل وحده بنسبة 1.1:1.
• الحالات نفسها كما في Input: لا حد خارجي، وخط سفلي كامل عند التركيز أو الفتح، ويعرض الضغط نصف الخط السفلي. والضغط بالفأرة يفتح القائمة فورًا، فينتقل من السكون إلى الفتح.

التبايننسخ رابط العنوان