跳到主要内容

文本区域
就绪
Storybook

文本区域是用于捕获用户更大输入(例如描述或详细信息)的基本组件。

用法

文本区域应与字段组件一起使用,以获取标签和描述。可以通过使用 required 属性来启用默认的 HTML 验证。

加载中...
实时编辑器
<Field label="Message" description="Write your message here">
  <TextArea name="importantTextarea" required />
</Field>

何时使用

当您需要用户输入较长的自由格式文本时,请使用文本区域。这可以用于捕获描述、反馈或任何其他无法合理地包含在单行输入字段中的信息。

占位文本用法

文本区域组件支持 placeholder 属性,该属性可用于向用户提供关于预期输入类型的提示。应谨慎使用此属性,因为如果用户开始输入时占位文本消失,可能会让他们感到困惑。如果确实使用占位文本,请确保预期输入的类型非常明确。例如,“在此输入您的反馈”比“在此输入您的消息”要好。

实现 / 选项

文本区域组件包含一个可选的 invalid 属性,可以将其设置为 true 以将文本区域标记为存在错误。这可用于视觉指示问题,例如验证错误或不正确输入。

除了 invalid 属性之外,文本区域组件默认接受 HTMLTextAreaElement 的所有标准属性作为属性。这确保了文本区域可以作为标准 HTML textarea 元素的直接替代品使用。

演练场