---
title: FocusLock
description: "`FocusLock` is a component that improves accessibility by restricting focus within elements such as modals and dialogs, and locking the focus within that range."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/focus-lock
---

```tsx
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>
)
```

## Usage

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

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

```tsx
import { FocusLock } from "@workspaces/ui"
```

```tsx
<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.                                                                             |