Search Box

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

ويثبّت Input وField أيضًا.

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

import { useState } from "react";
import { Field, FieldLabel } from "@/components/ui/field";
import { SearchBox } from "@/components/ui/search-box";

export function ServiceSearch() {
  const [query, setQuery] = useState("");
  return (
    <Field>
      <FieldLabel>البحث في الخدمات</FieldLabel>
      <SearchBox
        value={query}
        onValueChange={setQuery}
        placeholder="ابحث في الخدمات"
        clearLabel="مسح البحث"
      />
    </Field>
  );
}

استخدم Search Box للعثور على عناصر في قائمة أو جدول أو الموقع كله. أعطه تسمية ظاهرة أو aria-label، ونصًا تلميحيًا يوضح ما يُبحث عنه. ترجم clearLabel في الصفحات العربية. والنتائج من عندك: يجمع هذا المكوّن عبارة البحث فقط.

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

• الإطار: الحد والتعبئة نفسهما في Input.
• أيقونة البحث: في جهة البداية، زخرفية.
• الحقل (type="search"): عبارة البحث.
• زر المسح: في جهة النهاية، يظهر عند وجود نص.

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

زر المسحنسخ رابط العنوان

اكتب لإظهار زر المسح. يفرغ الحقل ويعيد التركيز إليه ويستدعي onValueChange بنص فارغ. ويفعل Esc الشيء نفسه.

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

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

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

تقع أيقونة البحث على اليمين (البداية) وزر المسح على اليسار (النهاية). والأيقونتان غير اتجاهيتين فلا تُعكسان. ويُحاذى النص التلميحي وعبارة البحث العربيان إلى اليمين.

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

• حقل type="search" أصلي، تُعلنه قارئات الشاشة حقل بحث.
• لزر المسح اسم (clearLabel) ومساحة نقر 24px وحد تركيز خاص به.
• ضع الحقل داخل <form role="search"> أو معلم search ليتمكن المستخدمون من القفز إليه.
• أعلن عدد النتائج في منطقة حيّة (role="status") عند تحديثها.

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

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

• نسخة الأيقونة اللاحقة في Figma (المسح أو الصوت) صارت زر مسح حقيقيًا باسم، ويعيد التركيز إلى الحقل.
• الحالات كما في Input: لا حد خارجي، وخط سفلي ينمو من الوسط، ولا حدّ للتعبئتين الأفتح والأغمق في حالة السكون.

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