Hotkeys

The v-hotkey component renders keyboard shortcuts in a visually consistent and accessible way. It handles complex key combination parsing, platform-specific differences (Mac vs PC), and provides multiple display modes for different design needs.

Copy Page as Markdown

Usage

Hotkeys display keyboard shortcuts with proper styling and platform awareness. The component automatically handles platform differences like showing ⌘ on Mac and Ctrl on PC.

<v-hotkey keys="cmd+k" variant="elevated" platform="mac" />

ads via vuetify

API

Component	Description
v-hotkey	Primary Component

Toggle Inline API

Guide

The v-hotkey component is designed to display keyboard shortcuts consistently across your application. It’s commonly used in command palettes, help documentation, tooltips, and anywhere you need to show keyboard shortcuts to users.

The v-hotkey component serves solely as a visual tool for displaying keyboard shortcuts. It does not generate or manage keyboard shortcuts itself. To implement functional keyboard shortcuts, utilize the useHotkey composable.

Props

The component provides several props to customize how keyboard shortcuts are displayed and parsed. This component is designed to work seamlessly across different platforms, automatically adjusting key representations based on the user’s operating system.

Keys

The keys prop accepts a string representing keyboard shortcuts in various formats. See Hotkeys for detailed parsing rules.

Single Keys

Letter key:

Enter key:

Escape key:

Arrow key:

Key Combinations

Ctrl + K:

Meta + Shift + P:

Alt + Arrow:

Ctrl + Shift + Enter:

Sequential Actions

Ctrl+K then P:

Ctrl+X then Ctrl+C:

Multiple Options

Ctrl+K or Meta+P:

Multiple options:

Platform-Aware Key Combinations

meta+shift+p

ctrl+k meta+p

alt+arrowup

ctrl+k-meta+p

Display modes

The display-mode prop controls how keys are visually represented. Choose from icon (default), symbol, or text modes:

Icon Mode (Default)

Uses SVG icons - compact and modern

Ctrl + K:

Meta + Shift + P:

Alt + Arrow:

Enter:

Symbol Mode

Uses Unicode symbols - Mac-style appearance

Ctrl + K:

Meta + Shift + P:

Alt + Arrow:

Enter:

Text Mode

Uses full text labels - most accessible

Ctrl + K:

Meta + Shift + P:

Alt + Arrow:

Enter:

Interactive Comparison

Platform awareness

The component automatically detects the user’s platform and adjusts key representations accordingly:

Platform Detection: Currently detected as PC

Cross-Platform Keys

These keys automatically adapt to your platform

meta+k:

alt+shift+f:

meta+alt+shift+k:

Platform-Specific Keys

Explicit platform targeting

ctrl+c:

cmd+v:

ctrl+x meta+c:

Display Mode & Platform Comparison

Key Combination	Display	Platform Behavior
`meta+k`		Command on Mac
`alt+f`		Option on Mac
`ctrl+shift+p`		Always Ctrl (explicit)
`cmd+shift+p`		Command on Mac

Custom key mapping

It is recommended to set the key-map prop at the application level via global component defaults rather than per-instance for consistency.

Use the key-map prop to customize how specific keys are displayed. You can import and modify the exported hotkeyMap to create custom configurations:

import { hotkeyMap } from 'vuetify/labs/VHotkey'

const customKeyMap = {
  ...hotkeyMap,
  ctrl: {
    default: { text: 'Control', icon: '$ctrl' },
    mac: { symbol: '⌃', icon: '$ctrl', text: 'Control' }
  }
}

Custom Key Mapping: Override default key representations for localization, branding, or special keys.

Default Key Mapping

Standard Vuetify key representations

ctrl+s:

meta+z:

alt+f4:

shift+enter:

Custom Key Mapping

Customized key representations

ctrl+s:

meta+z:

alt+f4:

shift+enter:

Platform Comparison with Custom Mapping

Key	Default Mapping	Custom Mapping	Difference
`ctrl+s`			Uses "Control" instead of "Ctrl" in Text mode
`alt+f`			Different symbols: ⎇ vs ⌥/Alt in Symbol mode
`enter`			Uses "Return" and ⏎ symbol in Text mode and Symbol mode respectively

Code Example

// Import the default hotkeyMap and extend it
import { hotkeyMap } from 'vuetify/labs/VHotkey'

const customKeyMap = {
  ...hotkeyMap,
  ctrl: {
    mac: { symbol: '⌃', icon: '$ctrl', text: 'Control' },
    default: { symbol: '⌃', icon: '$ctrl', text: 'Control' },
  },
  alt: {
    mac: { symbol: '⌥', icon: '$alt', text: 'Option' },
    default: { symbol: '⎇', icon: '$alt', text: 'Alt' },
  },
  enter: {
    default: { symbol: '⏎', icon: '$enter', text: 'Return' },
  },
}

Inline display

The inline prop optimizes the component for integration within text content, documentation, and flowing paragraphs. This mode applies specialized styling for seamless text flow and improved readability:

Standard Display (Block-level)

Save your work with

or create a new file using

Access the command palette with

to quickly navigate your project.

Inline Display (Text-integrated)

Getting Started with Code Editor

Welcome to your new development environment! Here are the essential keyboard shortcuts to boost your productivity. Press

to open the command palette, or use

to quickly open any file in your project.

File Operations: Save your current file with

or create a new file by pressing

. Need to close a file? Use

to close the current tab.

Navigation: Jump to a specific line with

, find text using

, or search across your entire project with

Advanced: For power users, try the sequence

to access advanced search options, or use

to open settings.

Layout considerations: When using multiple inline hotkeys within the same paragraph, consider increasing the line-height of the containing text to provide adequate vertical spacing. This prevents visual overlap when hotkey components wrap to new lines, ensuring clean separation and improved readability.

Accessibility

The v-hotkey component is designed with accessibility in mind. It uses semantic HTML elements and ARIA attributes to ensure that screen readers can interpret the displayed keyboard shortcuts correctly.

ARIA attributes

The component uses the aria-label attribute to provide a clear description of the keyboard shortcut. This is automatically generated based on the current keys.

<v-hotkey keys="ctrl+s" />

will generate the following HTML:

<div class="v-hotkey" role="img" aria-label="Keyboard shortcut: Ctrl plus S">
  <span class="v-hotkey__combination">
    <div class="v-kbd v-hotkey__key" aria-hidden="true">Ctrl</div>
    <span class="v-hotkey__divider" aria-hidden="true">+</span>
    <div class="v-kbd v-hotkey__key" aria-hidden="true">S</div>
  </span>
</div>

The HTML structure varies by variant. Standard variants use individual VKbd components, while the contained variant uses nested <kbd> elements within a single wrapper.

Key accessibility features:

Screen reader support: Uses role="img" with descriptive aria-label
Visual elements hidden: Individual keys and separators use aria-hidden="true"
Sequence notation: Dash separators display as “then” for screen readers (e.g., ctrl+k-p becomes “Ctrl plus K then P”)
Tooltips: Icon and symbol modes include title attributes for enhanced usability