搜索框

Search Field

也叫Search BoxQuery Field搜索输入框NSSearchField

接受查询文字并筛选或提交搜索结果。

Accepts a query to filter content or submit a search.

ANATOMY & USAGE

结构与使用建议

组成部分

搜索标签
查询输入
清除或提交按钮

适合使用

用户需要在大量内容中按文字查找时。

不建议使用

选项很少并可直接浏览时。

键盘与无障碍

使用 search landmark 与可访问标签；清除按钮需命名，动态结果更新通过状态区适度通知。

DESCRIBE IT TO AI

这样告诉编程助手

实现搜索框（Search Field）：接受查询文字并筛选或提交搜索结果。

MINIMAL RUNNABLE CODE

可复制代码

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

READ ONLY · SAFE TO COPY

<search class="demo">
  <form role="search">
    <label for="query">搜索组件</label>
    <div class="row">
      <input id="query" type="search" name="q">
      <button>搜索</button>
    </div>
  </form>
</search>