@chakra-ui/focus-lock

Focus Lock

This feature ensures that focus is trapped within the modal component, preventing users from tabbing out of the modal.

import { FocusLock } from '@chakra-ui/focus-lock';

function Modal() {
  return (
    <FocusLock>
      <div>
        <h1>Modal Title</h1>
        <p>Modal Content</p>
        <button>Close</button>
      </div>
    </FocusLock>
  );
}

Auto Focus

This feature automatically focuses the first focusable element within the FocusLock component when it is rendered.

import { FocusLock } from '@chakra-ui/focus-lock';

function Modal() {
  return (
    <FocusLock autoFocus>
      <div>
        <h1>Modal Title</h1>
        <p>Modal Content</p>
        <button>Close</button>
      </div>
    </FocusLock>
  );
}

Persistent Focus

This feature ensures that focus remains within the FocusLock component even if the user tries to click outside of it.

import { FocusLock } from '@chakra-ui/focus-lock';

function Modal() {
  return (
    <FocusLock persistentFocus>
      <div>
        <h1>Modal Title</h1>
        <p>Modal Content</p>
        <button>Close</button>
      </div>
    </FocusLock>
  );
}