focus-trap demo

☜ Return to the repository

In the demos below, you'll be able to tell that a focus trap is active because it will turn pink. You should also be able to tell because it will trap your focus!

When a trap is active, you can deactivate it by pushing its deactivate button or, if the demo allows, hitting Escape.

default behavior

Here is a focus trap with some focusable parts.

initial element, no escape

When this focus trap activates, focus jumps to a specific, manually specified element.

Also, in this demo the Escape key does not deactivate the focus trap. You must click the button.

Here is a focus trap with some focusable parts.

outside click, deactivates

When a click outside is registered, the focus-trap will be deactivated.

Here is a focus trap with some focusable parts.

allow outside click

A callback function can be used to determine whether or not you should be allowed to click outside of the focus trap when it's deactivated.

Here is a focus trap with some focusable parts.