interactive control

Interaction control functions are used in pop-ups, drawers, prompts, and accessibility scenarios.

ESC close

useEscapeKey(() => {
  open.set(false);
});

scroll lock

useScrollLock(() => open.value);

When open is true, document.body scrolling is locked and will be automatically restored when the component is unloaded.

focus trap

const host = useHost();

useFocusTrap(host);

Suitable for scenarios such as Dialog, Drawer, and PopConfirm where the Tab focus needs to be limited to the interior of the component.