> Markdown version of [Add Keyboard Shortcuts](https://vaadin.com/docs/next/building-apps/ui-basics/add-keyboard-shortcuts). Section index: [llms.txt](https://vaadin.com/docs/next/building-apps/llms.txt)

# Add Keyboard Shortcuts

Vaadin lets you assign keyboard shortcuts to components so that users can trigger actions and navigate without reaching for the mouse. This article covers the two most common types: click shortcuts that trigger a button press, and focus shortcuts that move focus to an input field. For custom shortcuts, scoped shortcuts, lifecycle management, and other advanced features, see the [Keyboard Shortcuts](https://vaadin.com/docs/next/flow/component-internals/shortcut.md) reference documentation.

## <a id="copy-paste-into-your-project"></a>Copy-Paste into Your Project

A self-contained view that demonstrates click and focus shortcuts:

```java
import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.KeyModifier;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;

@Route("shortcut-example")
public class ShortcutExampleView extends VerticalLayout {

    public ShortcutExampleView() {
        // Focus shortcut: Alt+N focuses the name field
        TextField name = new TextField("Name");
        name.setPlaceholder("Alt+N to focus");
        name.addFocusShortcut(Key.KEY_N, KeyModifier.ALT);

        // Focus shortcut: Alt+E focuses the email field
        TextField email = new TextField("Email");
        email.setPlaceholder("Alt+E to focus");
        email.addFocusShortcut(Key.KEY_E, KeyModifier.ALT);

        // Click shortcut: Enter triggers the save button
        Button save = new Button("Save", event ->
                Notification.show("Saved: " + name.getValue()));
        save.addThemeVariants(ButtonVariant.PRIMARY);
        save.addClickShortcut(Key.ENTER);

        add(new Paragraph("Try Alt+N, Alt+E, and Enter."),
                name, email, save);
    }
}
```

## <a id="click-shortcuts"></a>Click Shortcuts

A click shortcut triggers a button’s click action when the user presses a key. Any component that implements `ClickNotifier` supports this — most commonly `Button`.

Add a click shortcut with `addClickShortcut()`:

```java
Button login = new Button("Login");
login.addClickListener(event -> performLogin());
login.addClickShortcut(Key.ENTER);
```

The `Enter` key now triggers the login button from anywhere on the page.

You can add key modifiers to avoid conflicts with other shortcuts:

```java
Button save = new Button("Save");
save.addClickShortcut(Key.KEY_S, KeyModifier.CONTROL);
```

> **Tip:** The most common click shortcut is `Enter` on a form’s primary action button. This matches the behavior users expect from web forms.

## <a id="focus-shortcuts"></a>Focus Shortcuts

A focus shortcut moves keyboard focus to a `Focusable` component, like a text field. This lets users jump directly to an input without clicking.

Add a focus shortcut with `addFocusShortcut()`:

```java
TextField search = new TextField("Search");
search.addFocusShortcut(Key.KEY_S, KeyModifier.ALT);
```

Pressing `Alt`+`S` now focuses the search field from anywhere on the page.

> **Tip:** Focus shortcuts typically use `Alt` plus a letter as the modifier. This mirrors the access key convention in desktop applications and avoids conflicts with browser shortcuts.

## <a id="keys-and-modifiers"></a>Keys and Modifiers

Shortcut key combinations consist of one primary key and zero or more modifiers.

Primary keys are defined in the `Key` class:

- Letter keys: `Key.KEY_A` through `Key.KEY_Z`

- Special keys: `Key.ENTER`, `Key.ESCAPE`, `Key.SPACE`, `Key.TAB`

- Function keys: `Key.F1` through `Key.F12`

Modifiers are defined in the `KeyModifier` enum:

- `KeyModifier.ALT`

- `KeyModifier.CONTROL`

- `KeyModifier.SHIFT`

- `KeyModifier.META` (Cmd on macOS, Win on Windows)

Pass modifiers as extra arguments:

```java
// Single modifier
button.addClickShortcut(Key.KEY_S, KeyModifier.CONTROL);

// Multiple modifiers
button.addClickShortcut(Key.KEY_N, KeyModifier.CONTROL, KeyModifier.ALT);
```

You can also chain modifiers using the fluent API on the returned `ShortcutRegistration`:

```java
button.addClickShortcut(Key.KEY_S).withControl().withShift();
```

## <a id="removing-shortcuts"></a>Removing Shortcuts

Both `addClickShortcut()` and `addFocusShortcut()` return a `ShortcutRegistration` that you can use to remove the shortcut later:

```java
ShortcutRegistration registration =
        button.addClickShortcut(Key.ENTER);

// Later, when the shortcut is no longer needed:
registration.remove();
```

## <a id="when-to-add-shortcuts"></a>When to Add Shortcuts

Shortcuts work best when they speed up frequent actions without surprising the user:

**Good uses:**

- `Enter` to submit a form — users expect this from web forms

- `Escape` to close a dialog or cancel an action (Vaadin’s `Dialog` has built-in support for this via `setCloseOnEsc()`)

- `Alt`+`letter` to jump to key input fields in data-heavy forms

- `Ctrl`+`S` to save — mirrors the convention from desktop applications

**Avoid:**

- Adding shortcuts that conflict with browser defaults, for example, `Ctrl`+`T`, `Ctrl`+`W`, and `F5`

- Assigning shortcuts to rarely used actions — they add complexity without benefit

- Using shortcuts as the *only* way to trigger an action — always offer a clickable alternative for discoverability

## <a id="beyond-click-and-focus-shortcuts"></a>Beyond Click and Focus Shortcuts

Click and focus shortcuts cover the most common needs, but Vaadin’s shortcut system can do more:

- **Custom shortcuts** — run any action when a key combination is pressed, using `UI.addShortcutListener()`

- **Scoped shortcuts** — limit a shortcut to a specific part of the UI with `listenOn()`

- **Lifecycle management** — bind a shortcut’s active state to a component’s visibility

See the [Keyboard Shortcuts](https://vaadin.com/docs/next/flow/component-internals/shortcut.md) reference for details on these features.