Leave Yamada UI a star

Star
Yamada UIYamada UIv1.6.4

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.

Source@yamada-ui/focus-lock

Import

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

Usage

FocusLock controls the focus of child elements to lock the focus within that range.

Editable example

const { isOpen, onToggle } = useDisclosure()

return (
  <>
    <Button onClick={onToggle}>Please Click</Button>

    <Collapse isOpen={isOpen}>
      <FocusLock>
        <VStack py="md" px="px">
          <Input placeholder="This is Input" />

          <Button alignSelf="center">Button</Button>
        </VStack>
      </FocusLock>
    </Collapse>
  </>
)
Copied!

Edit this page on GitHub

PreviousPortalNextVisuallyHidden