attachments

Focustrap

Traps keyboard focus within a DOM element, preventing focus from leaving it while active. Designed for use with components such as dialog or modal.

Show code

Usage

The focustrap attachment should be used in dialog, modal, or similar interactive components to ensure that keyboard navigation remains confined within the component while it is open.

<script>
    import { focustrap } from 'svxui';
</script>

<form
    {@attach focustrap({
        // Enable/disable focus trap
        enabled: true,
        // Custom initial focus
        initialFocus: '#email'
    })}
>
    <input id="email" name="email" type="email" />
    <input id="password" name="password" type="password" />
    <button type="submit">signin</button>
</form>

API Reference

FocustrapOptions

Property	Type	Default	Description
`enabled`	`boolean`	true	Enable/disable focus trap
`initialFocus`	`union`		Element to focus when the focus trap is mounted. If not specified, the first focusable element is focused.