Skip to content
comp0

comp0

Actions

Keybinding Hint

A visible, semantic reminder for a keyboard shortcut implemented elsewhere.

When to use it: Use it beside actions that already respond to a discoverable, non-conflicting shortcut.

On this page
  1. Example
  2. Anatomy
  3. Step by step
  4. Keyboard
  5. Forms and accessibility
  6. API reference

Example

Loading example…
Keybinding Hint.tsxtsx
import { useEffect, useRef } from "react";
import { Button, Input, KeybindingHint, Label, TextField } from "@comp0/react";

export function Example() {
  const searchRef = useRef<HTMLInputElement>(null);
  useEffect(() => {
    const focusSearch = (event: KeyboardEvent) => {
      if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== "k") return;
      event.preventDefault();
      searchRef.current?.focus();
    };
    window.addEventListener("keydown", focusSearch);
    return () => window.removeEventListener("keydown", focusSearch);
  }, []);

  return (
    <div className="flex w-full max-w-md flex-col gap-3 text-base sm:text-sm">
      <Button
        aria-keyshortcuts="Control+K Meta+K"
        className="flex min-h-10 items-center justify-between gap-4 rounded-lg border border-zinc-950/15 px-3 py-2 text-left outline-teal-600 focus-visible:outline-2 dark:border-white/15 dark:outline-teal-400"
        onClick={() => searchRef.current?.focus()}
      >
        Search commands
        <KeybindingHint
          keys="Mod+K"
          className="flex items-center gap-1 text-xs text-zinc-500 dark:text-zinc-400 [&_[data-slot=keybinding-key]]:rounded [&_[data-slot=keybinding-key]]:border [&_[data-slot=keybinding-key]]:border-zinc-950/15 [&_[data-slot=keybinding-key]]:px-1.5 [&_[data-slot=keybinding-key]]:py-0.5 dark:[&_[data-slot=keybinding-key]]:border-white/15"
        />
      </Button>
      <TextField>
        <Label className="mb-1 block font-medium">Command search</Label>
        <Input
          ref={searchRef}
          className="min-h-10 w-full rounded-lg border border-zinc-950/15 bg-white px-3 py-2 outline-teal-600 focus-visible:outline-2 dark:border-white/15 dark:bg-zinc-900 dark:outline-teal-400"
        />
      </TextField>
    </div>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

A wireframe sketch of the assembled component. Each numbered marker matches a part in the list that follows.

  1. KeybindingHint

    Visible shortcut text composed from semantic kbd elements; it installs no keyboard behavior. Owns a DOM element.

Step by step

  1. 1

    Add the main part

    Put KeybindingHint inside or beside the action it accelerates.

  2. 2

    Add the supporting parts

    Describe simultaneous keys with + and sequential chords with spaces; Mod displays as Command on Apple platforms and Control elsewhere.

  3. 3

    Make the behavior clear

    Put the real combinations on the action with aria-keyshortcuts and implement the keyboard behavior separately.

    Exampletsx
    <Button aria-keyshortcuts="Control+K Meta+K">
  Search <KeybindingHint keys="Mod+K" />
</Button>;

Keyboard

Forms and accessibility

No form behavior and no keyboard handler; the related action owns both.

Accessibility checklist

  • A hint only documents a shortcut; implement the same keys on the related action and expose them through aria-keyshortcuts.
  • Avoid single-character global shortcuts. They can be triggered accidentally by speech input and must be disableable, remappable, or limited to a focused component.
  • Do not override browser, operating-system, or assistive-technology shortcuts.

API reference

Importtsx
import { Button, Input, KeybindingHint, Label, TextField } from "@comp0/react";

KeybindingHint

DOM element

Visible shortcut text composed from semantic kbd elements; it installs no keyboard behavior.

PropTypeDescription
keysstringChords joined by + and sequential chords separated by spaces; Mod adapts to the visitor's platform.
aria-labelstringOverrides the generated spoken key description.

Keep exploring