focus-trap
123456789101112131415161718192021222324252627282930313233343536373839404142
import type { FocusEvent } from "react";import { useRef } from "react";import * as Ariakit from "@ariakit/react";import "./style.css";export default function Example() {const firstRef = useRef<HTMLInputElement>(null);const lastRef = useRef<HTMLButtonElement>(null);const focusTrapped = checkbox.useState("value");const onTrapFocus = (event: FocusEvent) => {if (event.relatedTarget === firstRef.current) {lastRef.current?.focus();} else {firstRef.current?.focus();}};return (<><div className="wrapper"><label className="label">ref={firstRef}className="checkbox"/>Trap focus</label><button className="button" ref={lastRef}>Button</button></div></>);}import type { FocusEvent } from "react";import { useRef } from "react";import * as Ariakit from "@ariakit/react";import "./style.css";export default function Example() {const firstRef = useRef<HTMLInputElement>(null);const lastRef = useRef<HTMLButtonElement>(null);const focusTrapped = checkbox.useState("value");const onTrapFocus = (event: FocusEvent) => {if (event.relatedTarget === firstRef.current) {lastRef.current?.focus();} else {firstRef.current?.focus();}};return (<><div className="wrapper"><label className="label">ref={firstRef}className="checkbox"/>Trap focus</label><button className="button" ref={lastRef}>Button</button></div></>);}