文本控件

TextControl组件允许用户输入和编辑文本。

未填充和填充TextControl组件

设计指南

用法

何时使用文本控件

TextControls最适合用于自由文本输入。如果您有一组预定义的选项,希望用户从中进行选择,则最好使用更受约束的组件,如SelectControl、RadioControl、CheckboxControl或RangeControl。

因为TextControls是单行字段,所以不适合收集长响应。对于这些,请使用文本区域。

TextControls应该:

  • 脱颖而出,表明用户可以输入信息。
  • 具有明确区分的状态(选中/未选中、活动/非活动)。
  • 使其易于理解所请求的信息并解决任何错误。
  • 有明显的标签;占位符文本不能代替标签,因为当用户开始键入时,它会消失。

解剖

带有编号标签的TextControl组件的功能

  1. 标签
  2. 输入容器
  3. 输入文本

标签文本

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

容器

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

在容器周围有一个笔划的TextControl,可以清楚地指示输入区域


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

一个没有清晰可视标记来指示输入区域的TextControl

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

发展指南

用法

呈现用户界面以输入其他css类的名称。

从'react'导入{useState};从“@wordpress/components”导入{TextControl};const MyTextControl=()=>{const[className,setClassName]=使用状态(“”);返回(<文本控件__next无边距底部label=“附加CSS类”value={className}onChange={(值)=>setClassName(值)}/>);};

道具

组件可接受的支柱设置如下所示。
此集合中未包含的属性将应用于输入元素。

标签

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

  • 类型:字符串
  • 必需:否

隐藏标签来自视觉

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

  • 类型:布尔值
  • 必需:否

帮助

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

  • 类型:字符串
  • 必需:否

类型

要呈现的输入元素的类型。默认为“text”。

  • 类型:字符串
  • 必需:否
  • 默认值:“text”

价值

输入的当前值。

  • 类型:字符串|数字
  • 必需:是

类名

将使用“components-base-control”添加到包装器div类中的类。
如果没有传递className,则仅使用组件基控件。

  • 类型:字符串
  • 必需:否

onChange(更改时)

接收输入值的函数。

  • 类型:功能
  • 必需:是

__next40px默认大小

开始选择更大的默认高度,这将成为未来版本的默认大小。

  • 类型:布尔值
  • 必需:否
  • 违约:
  • 要为用户提供更多受约束的输入选项,请使用SelectControl、RadioControl、CheckboxControl或RangeControl。