useFocus

Track and control focus for a keyed HTML element.

useFocus returns a stable controller for a useNodeKey target. It exposes focus state plus imperative focus and blur operations.

Signature

FocusController useFocus(
  GlobalNodeKey<web.HTMLElement> target, {
  bool enabled = true,
});

final target = useNodeKey<web.HTMLInputElement>();
final focus = useFocus(target);
return input(key: target, onClick: () => focus.focus());

Interactive useFocus demo

Focused: waiting

Listeners attach after the node renders and detach when disabled, replaced, or unmounted.

hasFocus is null during SSR and before browser attachment. Imperative methods require an attached target.

Do not call focus() during build or before attachment. Prefer native focusable elements and preserve visible focus indicators.

Use useFocusWithin for composite regions and useActiveElement for document-wide focus.