文本区域控件

TextareaControls是允许多行文本的TextControls,并将溢出的文本换行到新行上。它们是一个固定的高度,当光标到达字段底部时,可以垂直滚动。

一个空的TextareaControl和一个输入了一些内容的聚焦TextareaController。

设计指南

用法

何时使用TextareaControl

当您需要鼓励用户输入长度超过一行的文本时,请使用TextareaControl。(较大的方框可以鼓励人们更加冗长,而较小的方框则鼓励人们简洁。)

TextareaControl应:

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

何时不使用TextareaControl

如果您需要让用户输入较短的答案(不超过一行),例如电话号码或姓名,请不要使用TextareaControl。在这种情况下,您应该使用文本控件.

使用TextareaControl允许用户输入长度超过一行的文本。

不要

使用TextareaControl获得更短的答案。

解剖

  1. 集装箱
  2. 标签

容器

容器通过在文本字段和周围内容之间创建对比度来提高文本字段的可发现性。


在容器周围使用笔划,这清楚地表明用户可以输入信息。

不要
使用不清晰的视觉标记指示文本字段。

标签文本

标签文本用于通知用户需要为文本字段提供哪些信息。每个文本字段都应该有一个标签。标签文本应位于输入字段上方,并且始终可见。用句子大写写标签。

错误文本

当文本输入不被接受时,错误消息可以显示如何修复它的说明。错误消息显示在输入行下方,替换助手文本直到修复。

发展指南

用法

从'react'导入{useState};从“@wordpress/components”导入{TextareaControl};const MyTextareaControl=()=>{const[text,setText]=使用状态(“”);返回(<文本区域控件label=“文本”help=“输入一些文本”值={text}onChange={(value)=>setText(value)}/>);};

道具

组件可接受的支柱设置如下所示。

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

帮助:string|元素

如果添加此属性,将使用帮助属性作为内容生成帮助文本。

  • 必需:否

隐藏标签来自视觉:布尔值

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

  • 必需:否

标签:一串

如果添加此属性,将使用label属性作为内容生成标签。

  • 必需:否

onChange(更改时):(value:string)=>void

一种函数,每次更改时都会接收文本区域的新值。

  • 必需:是

:

文本区域应包含的行数。

  • 必需:否
  • 默认值:4

价值:一串

文本区域的当前值。

  • 必需:是
  • 对于用户只输入一行文本的字段,请使用文本控件组件。