مربع بحث

SearchBox

حقل بحث في React مبني على TextInput: عدسة، بحث صوتي، زر مسح، وEnter للبحث. يناسب التصفية الحية وصفحات البحث الكاملة.

يعتمد SearchBox على TextInput، ويضيف إليه عدسة، ميكروفوناً، وزر مسح. يستدعي SearchBox الدالة onSearch عند الضغط على Enter.

متى تستخدمه

استخدم SearchBox في أعلى القوائم، الجداول، وأدلة الخدمات. استخدم onSearch للاستعلام المرسل، وvalue المتحكم به للتصفية الحية أثناء الكتابة. اعرض عدد النتائج قرب الحقل ليعرف المستخدم أن البحث نجح.

للوحة أوامر عامة، استخدم Command.

أمثلة

بحث أساسي

ابحث عن خدمة

تصفية حية (متحكم بها)

البحث عن مدينة

كل المدن

أنماط التعبئة

افتراضي

معبأ أفتح

معبأ أغمق

تسمية عربية

ابحث عن خدمة

اكتب كلمة مفتاحية ثم اضغط Enter.

الخصائص

الخصائص التي يعرفها 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 الحقل. زرا المسح والبحث الصوتي زران حقيقيان بأسماء متاحة.

عند التصفية الحية، أعلن عدد النتائج في منطقة حية ليحصل مستخدم قارئ الشاشة على تغذية راجعة.