Focus Trap
Svelte ActionAllows you to contain tab focus within a target element on-demand.
Import
Package
Source
Doc
Examples
Getting Started
Apply use:focusTrap
then set either true
or false
to enable or disable focus.
let isFocused: boolean = true;
<form use:focusTrap={isFocused}>
<input type="text" placeholder="Name" />
<button class="btn variant-filled-primary">Submit</button>
</form>
Navigation
When enabled this action will auto-select the first focusable element. Press Tab or Shift + Tab to cycle through focusable elements within the target region. When the last item is reached focus will loop to the start, and vice versa.
Focusing Overlays
Skeleton automatically enables this action for overlays such as modals and drawers to aid accessability.