حقول الإدخالجديد
مربّع بحث
SearchBoxحقل بحث في React مبني على TextInput مع عدسة وبحث صوتي وزر مسح وEnter للبحث. يناسب التصفية الحيّة وصفحات البحث الكاملة.
يبني SearchBox على TextInput ويضيف عدسة ومايكروفونًا وزر مسح. يستدعى onSearch عند الضغط على Enter.
متى تستخدمه
استخدم SearchBox في أعلى القوائم والجداول وأدلّة الخدمات. استخدم onSearch للاستعلام المرسل وvalue المتحكَّم به للتصفية الحيّة أثناء الكتابة. اعرض عدد النتائج قريبًا ليعرف المستخدم أن البحث نجح.
للوحة أوامر عامة استخدم Command.
أمثلة
الخصائص
الخصائص التي يعرّفها SearchBox. سمات العنصر الأصلي تمرّ كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
size | "md" | "lg" | ||
variant | "default" | "filled-lighter" | "filled-darker" | ||
label | react.ReactNode | Visible field label, auto-associated to the input via htmlFor/id. | |
helperText | react.ReactNode | Hint shown below the field. Hidden while an error message is showing. | |
helperIcon | react.ReactNode | ||
errorMessage | react.ReactNode | Message shown below the field when error is true. | |
error | boolean | Marks the field invalid: sets aria-invalid and error styling. | |
onSearch | (value: string) => void | Fires on Enter with the current query string. | |
voiceSearch | boolean | Show the SDGA voice-search mic while the field is empty. Default true. | |
onVoiceSearch | (value: string) => void | Fires when the voice-search mic is activated, with the current query. | |
onClear | () => void | Fires when the field is cleared (clear button or Escape). | |
clearable | boolean | Show the clear (×) button while the field has a value. Default true. | |
clearLabel | string | Accessible label for the clear button. Default 'Clear search'. | |
voiceLabel | string | Accessible label for the voice-search mic. Default 'Search by voice'. |
إمكانية الوصول
يحتفظ الحقل بتسمية ظاهرة أو aria-label، وأيقونة العدسة زخرفية. ينفّذ Enter البحث ويمسح Escape الحقل. زرا المسح والصوت زران حقيقيان بأسماء متاحة.
عند التصفية الحيّة أعلن عدد النتائج في منطقة حيّة ليحصل مستخدم قارئ الشاشة على تغذية راجعة.