# ember-focus-trap

> A Ember modifier to trap your focus.

Latest version **2.0.0** (published 2026-03-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install ember-focus-trap
pnpm add ember-focus-trap
yarn add ember-focus-trap
bun add ember-focus-trap
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2026-03-17 |
| First published | 2019-05-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >= 22.* |
| Dependencies | 3 |
| Unpacked size | 27.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Josemar Luedke |
| Maintainers | josemarluedke |
| Keywords | ember-addon |

## Links

- npm: https://www.npmjs.com/package/ember-focus-trap
- Repository: https://github.com/josemarluedke/ember-focus-trap
- Homepage: https://josemarluedke.github.io/ember-focus-trap
- Issues: https://github.com/josemarluedke/ember-focus-trap/issues
- npm.io page: https://npm.io/package/ember-focus-trap

## Dependencies (3)

- [focus-trap](https://npm.io/package/focus-trap.md) ^8.0.0
- [decorator-transforms](https://npm.io/package/decorator-transforms.md) ^2.3.1
- [@embroider/addon-shim](https://npm.io/package/@embroider/addon-shim.md) ^1.10.2

## Recent versions

- 2.0.0 (latest) — 2026-03-17
- 1.2.0 — 2026-02-21
- 1.1.1 — 2024-11-13
- 1.1.0 — 2023-08-17
- 1.0.2 — 2023-04-19
- 1.0.1 — 2022-01-25
- 1.0.0 — 2022-01-08
- 1.0.0-alpha.0 — 2022-01-08
- 0.8.0 — 2021-11-18
- 0.7.0 — 2021-05-27
- 0.6.0 — 2021-04-30
- 0.5.0 — 2020-11-18
- 0.4.0 — 2020-02-28
- 0.3.2 — 2019-09-03
- 0.3.1 — 2019-07-01
- … 4 more at https://npm.io/package/ember-focus-trap/versions

## README

<p align="center">
  <img width="640" src="https://repository-images.githubusercontent.com/186169303/b236b180-7408-11e9-9c6d-e58e1fd21700">
</p>

<p align="center">
  <a href="https://github.com/josemarluedke/ember-focus-trap/actions"><img src="https://github.com/josemarluedke/frontile/workflows/CI/badge.svg" alt="Build Status"></a>
  <a href="https://emberobserver.com/addons/ember-focus-trap"><img src="https://emberobserver.com/badges/ember-focus-trap.svg" alt="Ember Observer Score"></a>
  <a href="https://badge.fury.io/js/ember-focus-trap"><img src="https://badge.fury.io/js/ember-focus-trap.svg" alt="NPM version"></a>
</p>

**Ember Focus Trap**: A Ember modifier to trap your focus.

[View the docs here](https://ember-focus-trap.netlify.app/).

We use [focus-trap](https://github.com/focus-trap/focus-trap) as a lower-level implementation.
It is super lightweight and has minimal dependencies.

Trap focus within a DOM node.

There may come a time when you find it important to trap focus within a DOM node — so that when a user hits `Tab` or `Shift+Tab` or clicks around, she can"t escape a certain cycle of focusable elements.

Please read the [focus-trap](https://github.com/focus-trap/focus-trap) documentation to understand what a focus trap is, what happens when a focus trap is activated, and what happens when one is deactivated.

## Compatibility

* Ember.js v4.16 or above
* Embroider or ember-auto-import v2
* Node.js v20 or above

## Installation

```bash
pnpm add ember-focus-trap
```

or

```bash
npm install ember-focus-trap
```

## Usage

[See demos and read the documentation here](https://josemarluedke.github.io/ember-focus-trap).

Import the modifier and use it in your components:

```gts
import { focusTrap } from 'ember-focus-trap';

<template>
  <div {{focusTrap}}>
    <p>
      Here is a focus trap
      <a href="#">with</a>
      <a href="#">some</a>
      <a href="#">focusable</a>
      parts.
    </p>
    <p>
      <button type="button">Some button</button>
    </p>
  </div>
</template>
```

### With Focus Trap Options

```gts
import { focusTrap } from 'ember-focus-trap';
import { hash } from '@ember/helper';

<template>
  <div
    {{focusTrap
      focusTrapOptions=(hash
        onDeactivate=@onDeactivate
        initialFocus="#initial-focusee"
      )
    }}
  >
    <p>
      Here is a focus trap
      <a href="#">with</a>
      <a href="#">some</a>
      <a href="#">focusable</a>
      parts.
    </p>
    <p>
      <button type="button" id="initial-focusee">Some button</button>
    </p>
  </div>
</template>
```

## Contributing

See the [Contributing](CONTRIBUTING.md) guide for details.

## License

This project is licensed under the [MIT License](LICENSE.md).

---
_Source: https://npm.io/package/ember-focus-trap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._