COMPONENT 48 · Feedback & Status

焦点环

Focus Ring

也叫Focus IndicatorFocus Outline焦点指示器

在键盘聚焦控件外显示清晰轮廓，标示当前操作位置。

A visible outline indicating the currently keyboard-focused control.

ANATOMY & USAGE

结构与使用建议

组成部分

可聚焦控件
外侧轮廓
对比背景

适合使用

界面包含任何键盘可操作控件时。

不建议使用

不要移除焦点环，或只在鼠标点击后制造多余视觉噪声。

键盘与无障碍

优先使用 :focus-visible；轮廓对比清楚且不被裁切，不能只靠颜色变化。

DESCRIBE IT TO AI

这样告诉编程助手

实现焦点环（Focus Ring）：在键盘聚焦控件外显示清晰轮廓，标示当前操作位置。

MINIMAL RUNNABLE CODE

可复制代码

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

READ ONLY · SAFE TO COPY

<section class="demo stack" aria-label="焦点环示例">
  <p>按 Tab 键移动焦点，观察控件外侧的高对比焦点环。</p>
  <div class="row">
    <a href="#focus-target">跳到示例</a>
    <label>名称 <input value="示例">
    </label>
  </div>
  <span id="focus-target" tabindex="-1">示例目标</span>
</section>