Focus Trap

A component for trapping focus within a specified element.

Usage

<script>
  import {FocusTrap} from 'ui-ingredients';

  let trapped = $state(false);
</script>

<button
  type="button"
  onclick={() => {
    trapped = !trapped;
  }}
>
  {#if trapped}
    End trap
  {:else}
    Start trap
  {/if}
</button>

<FocusTrap disabled={!trapped} returnFocusOnDeactivate={false}>
  <input />
  <textarea></textarea>
  <button
    type="button"
    onclick={() => {
      trapped = false;
    }}
  >
    Submit
  </button>
</FocusTrap>

API Reference

Root

Prop	Default	Description
`disabled`		`boolean` Whether the focus trap is disabled
`returnFocusOnDeactivate`		`boolean` Whether the focus trap should return focus to the previously focused element when deactivated