---
title: "useFocus – Element Hook Usage & Examples"
description: "React Sensor Hooks that tracks element foucs state."
canonical: https://reactuse.com/element/usefocus/
---

# useFocus

React Sensor Hooks that tracks element foucs state

`useFocus` tracks and controls the focus state of a specific DOM element. It returns a tuple of `[isFocused, setFocused]` -- a boolean indicating whether the element currently has focus, and a function to programmatically focus or blur it. You can optionally pass `true` as the second argument to auto-focus the element on mount.

### When to Use

- Building accessible form components that need to track and programmatically control focus
- Implementing focus management in modal dialogs, wizards, or multi-step forms
- Creating focus indicators or visual feedback that responds to focus state changes

### Notes

- **Two-way binding**: The returned setter calls `element.focus()` or `element.blur()` under the hood, so the DOM and React state stay in sync.
- **Initial focus**: Pass `true` as the `initialValue` parameter to focus the element immediately after mount.
- See also `useActiveElement` for tracking which element has focus globally across the entire document.

## Usage

```tsx live
function Demo() {
  const text = useRef<HTMLParagraphElement>(null);
  const input = useRef<HTMLInputElement>(null);
  const button = useRef<HTMLButtonElement>(null);

  const [paragraphFocus, setParagraphFocus] = useFocus(text);
  const [inputFocus, setInputFocus] = useFocus(input, true);
  const [buttonFocus, setButtonFocus] = useFocus(button);
  return (
    <div>
      <p ref={text} style={paragraphFocus ? { opacity: 0.5 } : {}} tabIndex={0}>
        Paragraph that can be focused
      </p>
      <input ref={input} placeholder="Input that can be focused" />
      <br />
      <br />
      <button ref={button} style={buttonFocus ? { opacity: 0.5 } : {}}>
        Button that can be focused
      </button>
      <br />
      <br />
      <hr />
      <p style={{ height: "2rem" }}>
        {paragraphFocus && "The paragraph has focus"}
        {inputFocus && "The input control has focus"}
        {buttonFocus && "The button has focus"}
      </p>
      <div>
        <button
          onClick={() => {
            setParagraphFocus(!paragraphFocus);
          }}
        >
          Focus text
        </button>
        <button
          onClick={() => {
            setInputFocus(!inputFocus);
          }}
        >
          Focus input
        </button>
        <button
          onClick={() => {
            setButtonFocus(!buttonFocus);
          }}
        >
          Focus button
        </button>
      </div>
    </div>
  );
};

```

%%API%%