Does it listen for shortcuts across the whole page?

No. Capture starts only after the user activates the focused Record shortcut button. Outside capture it has no key listener.

Does it reserve browser shortcuts by preventing them?

No. Known browser and system combinations are rejected while recording, but the event is not cancelled or stopped, so the browser or operating system keeps its normal behavior.

How do I run the saved shortcut?

Store the emitted canonical value in your own setting and bind it in the relevant page or application scope. The recorder itself never adds a global shortcut handler.

Input Shortcut Recorder

Capture a keyboard shortcut only while its focused control is recording.

Open quick search

Choose a shortcut for opening the workspace search. Browser and system combinations are reserved.

Control+Shift+K

Workspace shortcut · Control+Shift+K

Input Shortcut Recorder is a controlled setting field for assigning keyboard shortcuts in command settings, editor preferences, and workspace tools.

The user must activate the focused capture button first. Modifier keys are normalized into a canonical chord; Escape cancels without changing the existing value, and explicit clearing is separate. Reserved browser and system shortcuts are reported but never prevented or swallowed.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/input-shortcut-recorder

Usage

"use client";

import { useState } from "react";
import { InputShortcutRecorder } from "@/components/input-shortcut-recorder";

export function SearchShortcutSetting() {
  const [shortcut, setShortcut] = useState<string | null>("Control+Shift+K");
  return <InputShortcutRecorder value={shortcut} onValueChange={setShortcut} label="Open search" />;
}

Props

Prop	Type	Default	Description
value	string \| null	required	Controlled canonical chord such as Control+Shift+K, or null when no shortcut is assigned.
onValueChange	(value: string \| null) => void	required	Receives the canonical chord on valid capture or null when the user clears it.
label	string	required	Visible name for this shortcut setting.
description	string	undefined	Optional short help associated with the capture control.
disabled	boolean	false	Disables recording and clearing.
className	string	undefined	Additional classes merged onto the panel.

Customisation

The value is a platform-neutral canonical string ordered Control, Alt, Shift, Meta, then the normalized key. This field only records a preference; consumers decide when and where a saved shortcut runs. It installs no global listener and does not prevent browser defaults.

<InputShortcutRecorder value={shortcut} onValueChange={setShortcut} label="Open search" />

Frequently asked questions

Does it listen for shortcuts across the whole page?: No. Capture starts only after the user activates the focused Record shortcut button. Outside capture it has no key listener.
Does it reserve browser shortcuts by preventing them?: No. Known browser and system combinations are rejected while recording, but the event is not cancelled or stopped, so the browser or operating system keeps its normal behavior.
How do I run the saved shortcut?: Store the emitted canonical value in your own setting and bind it in the relevant page or application scope. The recorder itself never adds a global shortcut handler.

Related components

Build keyboard-friendly settingsExplore more free controlled form fields for your React project.Form components