منطقة نصية
Textareaحقل نصي متعدد الأسطر متاح الوصول في React يشارك TextInput عقد التسمية والنص المساعد والخطأ، مع rows والتحكم في تغيير الحجم وأنماط التعبئة.
يتشارك Textarea عقد الحقل مع TextInput. حدد rows للارتفاع الابتدائي وresize="none" لتثبيته.
متى تستخدمه
استخدم Textarea للنص الذي يتجاوز سطراً: تفاصيل شكوى، مبرر طلب، أو ملاحظات. اضبط rows لإظهار الطول المتوقع. استخدم resize="none" فقط حين لا يستطيع التخطيط التمدد. للقيمة القصيرة، استخدم TextInput.
إذا فرضت حداً أقصى للطول، اعرض عدد الأحرف المتبقية في helperText حتى لا يتفاجأ المستخدم عند الإرسال.
أمثلة
الخصائص
الخصائص التي يعرفها Textarea. سمات العنصر الأصلي تمر كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
variant | "default" | "filled-lighter" | "filled-darker" | ||
label | react.ReactNode | Visible field label, auto-associated to the textarea via htmlFor/id. | |
helperText | react.ReactNode | Hint shown below the field. Hidden while an error message is showing. | |
errorMessage | react.ReactNode | Message shown below the field when error is true. | |
error | boolean | Marks the field invalid: sets aria-invalid and error styling. | |
resize | "vertical" | "none" | Vertical resize handle (none locks it for fixed layouts). Horizontal/both omitted - they break form layout. |
إمكانية الوصول
تستخدم التسمية والنص المساعد ورسالة الخطأ الربط نفسه المستخدم في TextInput: htmlFor للتسمية وaria-describedby للرسائل، مع aria-invalid عند الخطأ.
اجعل الارتفاع الافتراضي سخياً، لأن مستخدم لوحة المفاتيح لا يستطيع سحب مقبض تغيير الحجم. أعلن حدود الأحرف بنص مكتوب بدلاً من الاعتماد على اللون.