نظرة عامة
استخدمTextarea للملاحظات والأوصاف والقيم الأخرى متعددة الأسطر. يتكامل مع الحقل للتسميات والتحقق من الصحة.
استخدام
الحالة غير المتحكم بها
استخدمdefaultValue لتعيين الملاحظات الأولية. تمتلك منطقة النص التغييرات اللاحقة.
rows وmaxLength وrequired وreadOnly. يقبل size القيمتين sm أو md، والقيمة الافتراضية هي md.
الخيارات المرئية
قارن بين الحجمين في الحالات الافتراضية، وحالات التركيز، وغير الصالحة، والمعطلة. يتم توضيح تغيير الحجم التلقائي بشكل منفصل أدناه.المظهر البسيط
استخدمvariant="plain" للنص متعدد الأسطر داخل سطح موجود. يزيل التعبئة والحدود والزوايا المستديرة وكل الحشو، مع الاحتفاظ بتنسيق النص والعنصر النائب والحالة المعطلة المشترك. يتبع المخطط الأزرق سلوك :focus-visible الأصلي للمتصفح. بالنسبة إلى عناصر التحكم النصية، يمكن أن يشمل ذلك تركيز المؤشر والتركيز التلقائي، بالإضافة إلى تركيز لوحة المفاتيح. تستخدم الحالة غير الصالحة مخطط خطر دون تغيير التخطيط.
rows وmaxRows والتحجيم التلقائي تتحكم في ارتفاع المحتوى. يستثني حد الصفوف الحشو والحدود في المظهر البسيط. يؤدي تغيير variant أثناء تفعيل التحجيم التلقائي إلى قياس التخطيط الجديد.
الحالة المتحكم بها
مررvalue وحدّثه باستخدام onValueChange لامتلاك الملاحظات نفسها في حالة React. تتلقى دالة رد الاتصال قيمة السلسلة التالية وتفاصيل الحدث؛ ويتوفر أيضًا onChange الأصلي.
تغيير الحجم تلقائيًا
يعمل تغيير الحجم تلقائيًا في أي من وضعي الحالة. يستخدم هذا المثال أيضًا القيمة المتحكم بها لعدّ الأحرف.autoResize القيمة المعتمدة بعد التحديثات المضبوطة، ويقيس التعديلات غير المضبوطة مباشرةً. لا تغيّر التعديلات المضبوطة المرفوضة الارتفاع. يُحدَّث أيضًا بعد عمليات إعادة تعيين النموذج الأصلية، وبعد تغييرات rows وsize وvariant وmaxRows والعرض المتاح. استخدم maxRows للحد من التمدد وتمرير المحتوى الأطول.
يتحكم التحجيم التلقائي في blockSize المضمّن أثناء تفعيله. يؤدي إيقافه إلى استعادة style.blockSize الحالي، أو مسح الحجم التلقائي إذا لم يُوفَّر أيٌّ منهما. عند إيقاف التحجيم التلقائي، تتحكم rows والأنماط الأصلية في الارتفاع. يكون تغيير الحجم اليدوي معطّلًا افتراضيًا؛ اضبط style={{ resize: 'vertical' }} عندما ينبغي للمتصلين تغيير حجم عنصر التحكم بأنفسهم.
عنصر التحكم الأصلي وتركيب العرض
تستهدف سمات ومعالجات textarea الأصلية، وclassName وstyle وref، عنصر textarea. يتلقى ref عنصر HTMLTextAreaElement. يقبل render عنصر textarea أو دالة رد نداء تتلقى خصائص textarea الأصلية وحالة Field. مرّر الخصائص وref الموفَّرين إلى textarea الأصلية لكي تستمر التسميات والتحقق والأحداث والقياس التلقائي في العمل. أضف عنصر تخطيط منفصلًا عند الحاجة إلى تخصيص الغلاف.
يتلقى onChange حدث تغيير React لعنصر textarea الأصلي. يحتفظ onValueChange(value, details) بتوقيع Base UI، بما في ذلك event وreason وcancel وallowPropagation الأصلية. يستهدف الحدث الأصلي textarea. يحافظ إلغاء التفاصيل على سياسة التحقق الخاصة بـ Base UI؛ ولا يتراجع عن القيمة الأصلية. يختار المتصلون المضبوطون القيمة المعتمدة.
تظل name وform وrequired وreadOnly وdisabled الأصلية، وسلوك الإرسال وإعادة التعيين، متاحة. يوفر Field التسمية والوصف والاسم وربط التحقق. يُدرج Enter فاصل أسطر في textarea.
الخصائص
يتم إنشاء المرجع من أنواع المكونات العامة. تُقبل أيضًا السمات الأصلية، بما في ذلك الأسماء المتاحة ومعالجات الأحداث، في الأجزاء التي تعرض عناصر.boolean
افتراضي:"false"
Measures committed controlled values or uncontrolled edits, form resets, row, size and variant changes, and width changes. Overrides blockSize while enabled.
string | ((state: InputState) => string | undefined)
CSS class applied to the textarea, or a function that returns a class
based on the input state.
number
Caps automatic height growth. Content beyond this row limit scrolls.
((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void)
Receives the next string value and Base UI details, including the native event, reason and cancellation methods.
Ref<HTMLTextAreaElement>
Ref to the native textarea element.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, InputState>
Composes the native textarea with a custom element or callback receiving textarea props and Field state. Forward the supplied props and ref to a textarea.
"md" | "sm"
افتراضي:"md"
Visual size of the textarea.
"default" | "plain"
افتراضي:"default"
default keeps the field frame. plain removes fill, border, radius and padding while retaining rows, automatic sizing and maximum rows. Its outline follows native :focus-visible, including pointer focus or autofocus on textareas; invalid state uses a danger outline.