FocusLock

FocusLock is a component that improves accessibility by restricting focus within elements such as modals and dialogs, and locking the focus within that range.

const { open, onToggle } = useDisclosure()

return (
  <VStack align="flex-start" gap="0">
    <Button onClick={onToggle}>Please Click</Button>

    <Collapse open={open}>
      <FocusLock>
        <VStack mt="lg" bg="bg.panel" p="lg" rounded="l2">
          <Input placeholder="This is Input" bg="bg" />

          <Button alignSelf="flex-end">Button</Button>
        </VStack>
      </FocusLock>
    </Collapse>
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Usage

import { FocusLock } from "@yamada-ui/react"

import { FocusLock } from "@/components/ui"

import { FocusLock } from "@workspaces/ui"

<FocusLock />

Props

Prop	Default	Type / Description
`autoFocus`	`false`	`boolean` If `true`, the first focusable element within the `children` will auto-focused once `FocusLock` mounts.
`contentRef`	-	`RefObject<HTMLElement \| null>` The `ref` of the wrapper for which the focus-lock wraps.
`disabled`	`false`	`boolean` If `true`, focus trapping will be disabled.
`finalFocusRef`	-	`RefObject<HTMLElement \| null>` `ref` of the element to return focus to when `FocusLock` unmounts.
`initialFocusRef`	-	`RefObject<HTMLElement \| null>` `ref` of the element to receive focus initially.
`lockFocusAcrossFrames`	`false`	`boolean` Enables aggressive focus capturing within iframes. - If `true`: keep focus in the lock, no matter where lock is active. - If `false`: allows focus to move outside of iframe.
`persistentFocus`	`false`	`boolean` If `true`, disables text selections inside, and outside focus lock.
`restoreFocus`	`false`	`boolean` If `true`, focus will be restored to the element that triggered the `FocusLock` once it unmounts.

Similar Components

VisuallyHidden is a common technique used in web accessibility to hide content from the visual client, but keep it readable for screen readers.

Used By Components & Hooks

Drawer is a component for a panel that appears from the edge of the screen.

Modal is a component that is displayed over the main content to focus the user's attention solely on the information.