COMPONENT 20 · Text & File Inputs

文本框

Text Field

也叫Text InputInput Field文本输入框NSTextField

用于输入单行自由文本的带标签控件。

A labeled control for entering a single line of free-form text.

ANATOMY & USAGE

结构与使用建议

组成部分

可见标签
输入框
帮助或错误文字

适合使用

用户需要输入姓名、标题等短文本时。

不建议使用

可选值有限且应从列表选择时。

键盘与无障碍

标签与 input 正确关联；错误通过 aria-describedby/aria-invalid 传达，不能只靠 placeholder。

DESCRIBE IT TO AI

这样告诉编程助手

实现文本框（Text Field）：用于输入单行自由文本的带标签控件。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<label class="demo stack" for="field">
  <span>文本框</span>
  <input id="field" type="text" placeholder="请输入内容">
  <small class="muted">输入内容会保留在当前示例中。</small>
</label>