حقل نصّي
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. الحقول الإلزامية تُعلن على أنها إلزامية.
لا تجعل النص النائب التسمية الوحيدة؛ فهو يختفي عند الكتابة ولا يحقّق متطلّبات التباين.