Code
<script lang="ts">
import { useFocusTrap } from 'svelora';
let active = $state(true);
let panel = $state<HTMLElement | null>(null);
useFocusTrap(() => panel, { active: () => active });
</script>
<div bind:this={panel} tabindex="-1">
<button>First</button>
<button>Second</button>
</div>
useFocusTrap
Trap keyboard focus within an element while active, then restore focus on exit. Cycles
Tab / Shift+Tab among the focusable descendants. Target and active accept a value
or reactive getter; SSR-safe.
Note: components built on bits-ui (Modal, Slideover, Drawer, Popover) already trap focus — use this for your own custom focus-scoped UI.
Toggle a focus trap
Activate, then press Tab — focus stays inside the panel and wraps around. Closing returns focus to the Activate button.
Free
Trapped panel
Try tabbing past the last button — it loops back to the first field.