Building Keyboard Shortcuts with Livewire v4

Add keyboard shortcuts to your app.

1 February 20261 min readLivewire اقرأ بالعربية

Implement keyboard shortcuts.

Component

blade

<div 
    x-data
    @keydown.window.ctrl.s.prevent="$wire.save()"
    @keydown.window.ctrl.k.prevent="$wire.openSearch()"
    @keydown.window.escape="$wire.close()">
    
    <!-- Component content -->
</div>

With Modifier Keys

blade

@keydown.ctrl.shift.n="$wire.newItem()"
@keydown.meta.enter="$wire.submit()"

Keep reading