حقل نصي
TextInputحقل نصي أحادي السطر متاح الوصول في React مع تسمية مدمجة ونص مساعد ورسالة خطأ وبادئات ولاحقات وأنماط تعبئة. جاهز للعربية والاتجاه من اليمين إلى اليسار.
يدير TextInput تسميته وربطها بالحقل. استخدم helperText وerrorMessage للحالات، وstartAdornment/endAdornment لأيقونة أو وحدة داخل الحقل.
متى تستخدمه
استخدم TextInput للقيم النصية القصيرة: الأسماء، العنوان الوطني، أرقام المرجع، والبريد الإلكتروني. استخدم Textarea للنص متعدد الأسطر، NumberInput للقيم الرقمية بأزرار الزيادة، وSearchBox للبحث.
ضع الوحدات ورموز العملة والأيقونات في startAdornment وendAdornment بدلاً من النص النائب، لتبقى ظاهرة بعد الكتابة. استخدم helperText لتوضيح الصيغة، مثل طول رقم الهوية المتوقع.
أمثلة
الخصائص
الخصائص التي يعرفها TextInput. سمات العنصر الأصلي تمر كما هي.
<TextInput>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
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. | |
startAdornment | react.ReactNode | Content rendered inside the field, before the input (icon, TextInputAffix,
or short text). Not aria-hidden (may be interactive); mark
purely-decorative icons aria-hidden yourself. | |
endAdornment | react.ReactNode | Content rendered inside the field, after the input. Compose a clear button
or password-reveal toggle here with <Button size="icon-sm">, the 28px
in-field icon size that fits without overflow. |
<TextInputAffix>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
variant | "solid" | "subtle" | solid = the SDGA gray prefix/suffix chip; subtle = borderless text. |
<TextInputDropdown>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
variant | "solid" | "subtle" | solid = the SDGA gray dropdown chip; subtle = transparent. | |
icon | react.ReactNode | Leading badge icon (e.g. <BadgeCheck />), sized 24/20 to the field. | |
selected | boolean | Open/selected - paints the SDGA dark #384250 chip + white text. |
<FieldMessage>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
idإلزامي | string | ||
variantإلزامي | "error" | "helper" | error announces politely; helper is static. | |
icon | react.ReactNode | Optional 16px leading feedback icon (SDGA helper/error glyph). | |
childrenإلزامي | react.ReactNode |
إمكانية الوصول
ترتبط التسمية label بالحقل عبر htmlFor وid. لذا يركز النقر عليها الحقل، ويعلنها قارئ الشاشة. يرتبط helperText وerrorMessage بالحقل عبر aria-describedby، ويضبط error السمة aria-invalid. يعلن قارئ الشاشة الحقول الإلزامية بأنها إلزامية.
لا تجعل النص النائب التسمية الوحيدة. يختفي النص النائب عند الكتابة، ولا يحقق متطلبات التباين.