跳到主要内容

Hotkey 快捷键Hotkey · Kbd

Hotkey 让用户录制一个组合键,用在“自定义快捷键”这类设置里。Kbd 是单个键帽,用来在文档、菜单和提示里展示按键。

录制

点击或按 Enter / 空格开始录制,然后直接按下组合键。修饰键按下即显示,按下一个非修饰键后完成。Esc、Tab 或失焦取消,原来的值不变。

⌘K当前:Command + K
点击后按下新的组合键
点击录制未设置

尺寸、文案与禁用

⌃B当前:Control + B
⌥⇧F当前:Option + Shift + F
⌘↩当前:Command + 回车
尚未绑定未设置
⌘S当前:Command + S

受控用法

value 是用 + 连接的按键名(KeyboardEvent.key 的写法),空字符串表示未设置。onChange 的第二个参数是拆开的数组。组件只负责录制,不负责监听和触发快捷键。

⌘⇧K当前:Command + Shift + K
value:Meta+Shift+K

Kbd 键帽

用 k 传按键名会自动换成符号(⌘ ⇧ ⌥ ⌃ ↩ …),并带上读屏能读出的名称;也可以直接写 children。

⌘⇧⌥⌃↩⌫⇥EscSpace↑↓←→
AAA
按 ⌘ K 打开命令面板,按 Esc 关闭。

规格

录制中
强调色描边 + 光环呼吸 1.6s · 不再叠加焦点环
键帽
逐个弹入 · 错峰 45ms · bouncy

API

Hotkey

属性类型默认值说明
valuestring—组合键(受控),用 + 连接,如 "Meta+Shift+K";空字符串表示未设置。
defaultValuestring''初始组合键(非受控)。
onChange(value: string, keys: string[]) => void—录到新的组合键时触发。
placeholderstring'点击录制'未设置时的提示。
recordingTextstring'按下组合键…'录制中的提示。
size'sm' | 'md' | 'lg''md'尺寸。
disabledboolean—禁用。

Kbd

属性类型默认值说明
kstring—按键名(Meta、Shift、Enter、ArrowUp、K…):自动换成符号并带可读名称。
size'sm' | 'md' | 'lg''md'高度 20 / 默认 / 28。
childrenReactNode—不传 k 时直接显示的内容。

无障碍

  • Hotkey 是 role="button",用 aria-pressed 表示是否在录制;当前绑定(或“正在录制”)写在一个 aria-live 区域里并通过 aria-describedby 关联,读屏读的是“Command + K”而不是符号。
  • Enter / Space 开始录制;录制中 Esc 取消、Tab 取消并照常移走焦点,其它按键都会被录下。
  • 录制期间按键被拦下,不会冒泡到外层——在对话框里录制时按 Esc 只取消录制,不会关掉对话框。
  • 必须有可读名称:放进带 label 的 Field,或给 aria-label。
  • Kbd 渲染成 <kbd>;符号外面包了带 title 的 <abbr>,悬停和部分读屏能得到按键的名字。