FocusLock
FocusLockは、モーダルやダイアログなどの要素でフォーカスを制限し、フォーカスをその範囲内にロックすることで、アクセシビリティを向上させるコンポーネントです。
インポート
import { FocusLock } from "@yamada-ui/react"
使い方
FocusLockは、子要素のフォーカスを制御して、フォーカスをその範囲内にロックします。
編集可能な例
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> </> )
GitHubでこのページを編集する