Skip to content
+

Focus Trap

The Focus Trap component prevents the user's focus from escaping its children components.

  • Feedback
  • Bundle size
Component demosComponents API

FocusTrap API

Import

import { FocusTrap } from '@mui/base/FocusTrap';
// or
import { FocusTrap } from '@mui/base';
Learn about the difference by reading this guide on minimizing bundle size.

Props

openRequired

If true, focus is locked.

Type:bool


children

A single child content element.

Type:element


disableAutoFocus

If true, the focus trap will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any focus trap children that have the disableAutoFocus prop.
Generally this should never be set to true as it makes the focus trap less accessible to assistive technologies, like screen readers.

Type:bool

Default:false


disableEnforceFocus

If true, the focus trap will not prevent focus from leaving the focus trap while open.
Generally this should never be set to true as it makes the focus trap less accessible to assistive technologies, like screen readers.

Type:bool

Default:false


disableRestoreFocus

If true, the focus trap will not restore focus to previously focused element once focus trap is hidden or unmounted.

Type:bool

Default:false


getTabbable

Returns an array of ordered tabbable nodes (i.e. in tab order) within the root. For instance, you can provide the "tabbable" npm dependency.

Type:func

Signature:
function(root: HTMLElement) => void

    isEnabled

    This prop extends the open prop. It allows to toggle the open state without having to wait for a rerender when changing the open prop. This prop should be memoized. It can be used to support multiple focus trap mounted at the same time.

    Type:func

    Default:function defaultIsEnabled(): boolean { return true; }



    The component cannot hold a ref.
    Edit this page

    Was this page helpful?


    Click-Away ListenerForm Control

    Blog

    Store