منطقة نصّية
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 عند الخطأ.
اجعل الارتفاع الافتراضي سخيًّا، لأن مستخدم لوحة المفاتيح لا يستطيع سحب مقبض تغيير الحجم. أعلن حدود الأحرف نصًّا لا لونًا.