Component KeybindingInput

KeybindingInput

A shortcut / keybinding capture field.

Behavior:

• Click to enter capture mode.
• Press a key chord (e.g. ⌘⇧K) to commit.
• Display uses UI symbols for modifiers.

KeybindingInput is designed to be self-contained: clicking it enters capture mode and the next non-modifier key press commits the binding.

Example

use gpui::ElementId;
use yororen_ui::component::keybinding_input;

let view = keybinding_input()
    .key(ElementId::from(("settings", "toggle_overlay")))
    .placeholder("Press keys…")
    .on_change(|binding, _window, _cx| {
        // binding: SharedString (already formatted for UI)
    });

When to use

• Preference screens where users can configure shortcuts

API

• keybinding_input(): constructor
• id(...) / key(...): stable identity
• value(SharedString): set current binding (controlled)
• placeholder("...")
• disabled(bool)
• on_change(|binding, window, cx| ...): fired when a chord is committed
• Styling: bg/border/focus_border/text_color/height

Interaction and behavior

• Click enters capture mode and focuses the control.
• Modifier-only presses update the live display but do not commit.
• The committed value is formatted via format_keybinding_ui (e.g. ⌘⇧K, ⎋).
• Internally it intercepts keystrokes to avoid GPUI pending-input delay.

Notes

• You still own persistence: store the returned SharedString in your settings model.

Defaults

• Height: 36px
• Placeholder: "Press keys…"

Tips

• Store the returned formatted string if you only need display.
• If you need a structured representation (modifiers + key), store your own model alongside it.