Focus Trap

Beta

Focus Trap keeps the focus within its focusable children elements.

installyarn add @clayui/core
versionNPM Version
useimport {FocusTrap} from '@clayui/core';

Introduction

Focus Trap is a component that wraps elements in the DOM and prevents focus from escaping from its child components when the user navigates with Tab or Shift + Tab.

It definitely is used when trying to build accessible components, blocking all interactions outside of it while Focus Trap is active.

It’s the responsibility of the user to add an escape method for the focus trap, either with a button or the escape key.

Example

API Reference

FocusTrap

({ active, children, focusElementRef }: Props) => JSX.Element
Parameters
Properties

active *

boolean

Flag to indicate if the focus trap is activated.

children *

React.ReactNode

The elements that will receive the focus within the focus trap.

focusElementRef

React.RefObject<HTMLElement> | undefined

Ref of the element that receives the focus when the focus trap is activated.

Returns
Element
Edit this page on GitHub

Contributors

Matuzalém Teles, Veronica Gonzalez

Last edited May 11, 2025 at 5:57:01 PM