多行文本控件

TextareaControls 是 TextControls，允许输入多行文本，并将溢出文本换行到新行。它们具有固定高度，当光标到达字段底部时会垂直滚动。

设计指南

用法

何时使用 TextareaControl

当您希望鼓励用户输入超过单行的文本量时，请使用 TextareaControl。（较大的框可以鼓励人们更详尽地表达，而较小的框则鼓励他们简明扼要。）

TextareaControl 应当：

• 从页面背景中脱颖而出，并表明用户可以在此输入信息。
• 具有清晰区分的激活/非激活状态，包括焦点样式。
• 通过清晰直接的错误通知，让用户易于理解并解决任何错误。
• 通过使用清晰且具有描述性的标签，让用户易于理解所请求的信息。

何时不使用 TextareaControl

如果您需要让用户输入较短的答案（不超过单行），例如电话号码或姓名，请不要使用 TextareaControl。在这种情况下，您应该使用 Text Control。

应当

使用 TextareaControl 让用户输入超过单行的文本。

不应当

对于较短的答案，不要使用 TextareaControl。

结构

1. 容器
2. 标签

容器

容器通过创建文本字段与周围内容之间的对比度，提高了文本字段的可见性。

应当
在容器周围使用描边，清晰地表明用户可以在此输入信息。

不应当
使用不明确的视觉标记来指示文本字段。

标签文本

标签文本用于告知用户文本字段请求什么信息。每个文本字段都应有一个标签。标签文本应位于输入字段上方，并且始终可见。标签文本应使用句子大小写规则书写。

错误文本

当输入的文本不被接受时，会显示一条错误消息，提供如何修复它的说明。错误消息显示在输入行下方，直到问题修复前，它会替换帮助文本。

开发指南

用法

import { useState } from 'react';
import { TextareaControl } from '@wordpress/components';

const MyTextareaControl = () => {
    const [ text, setText ] = useState( '' );

    return (
        <TextareaControl
            label="Text"
            help="Enter some text"
            value={ text }
            onChange={ ( value ) => setText( value ) }
        />
    );
};

属性

该组件接受的属性集将在下面指定。

未包含在此集合中的属性将应用于 textarea 元素。

help: string | Element

如果添加了此属性，将使用 help 属性的内容生成帮助文本。

• 必填：否

hideLabelFromVision: boolean

如果为 true，则标签仅对屏幕阅读器可见。

• 必填：否

label: string

如果添加了此属性，将使用 label 属性的内容生成标签。

• 必填：否

onChange: ( value: string ) => void

每次 textarea 值更改时接收新值的函数。

• 必填：是

rows: number

textarea 应包含的行数。

• 必填：否
• 默认值：4

value: string

textarea 的当前值。

• 必填：是

相关组件

• 对于用户仅输入一行文本的字段，请使用 TextControl 组件。