COMPONENT 84 · Selection & Values

多选选择器

Multi-select

也叫Multiple Select多选下拉多选筛选器

从固定候选中选择多个值，并可逐项移除。

Choose multiple values from a fixed set of options.

ANATOMY & USAGE

结构与使用建议

组成部分

候选搜索
选项集合
已选项目

适合使用

筛选多个团队、标签或参与者，并需要保留选中状态。

不建议使用

允许自由创建文本值时使用 Tags Input。

键盘与无障碍

示例使用有名称的原生 checkbox 组，Tab 和 Space 可操作。
搜索时保留隐藏选项的选中状态；移除按钮读出目标名称。

参考 React Aria · Select ↗核对于 2026-09-05

DESCRIBE IT TO AI

这样告诉编程助手

实现多选选择器（Multi-select）：从固定候选中选择多个值，并可逐项移除。

MINIMAL RUNNABLE CODE

可复制代码

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

READ ONLY · SAFE TO COPY

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section class="modern-demo">
      <input id="search" type="search" aria-label="搜索团队" placeholder="搜索团队" />
      <fieldset class="modern-options">
        <legend>参与团队</legend>
        <label><input type="checkbox" value="设计" checked />设计</label
        ><label><input type="checkbox" value="研发" />研发</label
        ><label><input type="checkbox" value="产品" />产品</label
        ><label><input type="checkbox" value="研究" />研究</label>
      </fieldset>
      <div id="selected" class="modern-actions" aria-label="已选团队"></div>
      <p id="status" role="status"></p>
    </section>
    <script src="script.js" defer></script>
  </body>
</html>