Focus Plugin (x-trap)

Trap focus within an element – essential for modals and dialogs.

Focus Plugin

The @alpinejs/focus plugin provides x-trap to contain keyboard focus inside an element (e.g., a modal) and $focus to programmatically focus elements. It's crucial for accessibility.

Installation

Code

npm install @alpinejs/focus

import focus from '@alpinejs/focus'
Alpine.plugin(focus)

Basic Focus Trap

Code

<div x-data="{ open: false }" x-trap="open" @keydown.escape="open = false">
  <button @click="open = true">Open Modal</button>
  <div x-show="open">
    <input type="text" placeholder="Focused input">
    <button @click="open = false">Close</button>
  </div>
</div>

Programmatic Focus

The $focus magic makes it easy to focus an element, with optional options.

Code

<button @click="$focus($refs.searchInput)">Focus search</button>
<input x-ref="searchInput" type="text">

💡 Tip

Always add @keydown.escape alongside x-trap so users can dismiss modals with the Escape key.

Helpful? Share this page!↑ Back to top