Focus Trap

Svelte Action

Allows you to contain tab focus within a target element on-demand.

@skeletonlabs/skeleton
Source Code
View Page Source

Examples

Getting Started

Apply use:focusTrap then set either true or false to enable or disable focus.

ts 
let isFocused: boolean = true;
html 
<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.

Skeleton Overlays

Skeleton automatically enables this action for overlays such as modals and drawers to provide proper accessability.