# useIsFocusWithin

*Category:* Utilities
*Section:* DOM behavior hooks
*Source:* https://uikit.developers.rio.cloud/#/utilities/useIsFocusWithin
*Captured:* 2026-04-27T14:59:36.144Z

The useIsFocusWithin hook allows you to detect whether the focus is currently within a specific element or any of its children. This is useful for managing focus-based behavior like showing or hiding UI elements, styling active areas, or triggering accessibility behavior.

## useIsFocusWithin

It provides a boolean flag isFocusedWithin and a ref you can attach to any container. Optionally, you can provide callbacks for when focus enters or leaves the container, and configure a delay for blur detection.

### Example: Example 1

Click inside or outside
Simple input 1

Simple input 2

Focus is outside the block

#### React (tsx)

```tsx
import ClearableInput from '@rio-cloud/rio-uikit/ClearableInput';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
import useIsFocusWithin from '@rio-cloud/rio-uikit/useIsFocusWithin';

export default () => {
    const { ref, isFocusedWithin } = useIsFocusWithin<HTMLDivElement>({
        onFocusWithin: () => console.log('Entered component'),
        onBlurWithin: () => console.log('Left component'),
        delay: 100, // optional
    });

    return (
        <div>
            <div
                ref={ref}
                className={`max-width-400 padding-20 border ${isFocusedWithin ? 'border-color-primary' : 'border-color-lighter'} rounded bg-lightest`}
            >
                <div className='text-medium text-size-16 text-color-darker margin-bottom-15'>
                    Click inside or outside
                </div>
                <div>
                    <FormLabel htmlFor='simpleInput1'>Simple input 1</FormLabel>
                    <ClearableInput id='simpleInput1' />
                </div>
                <div>
                    <FormLabel htmlFor='simpleInput2'>Simple input 2</FormLabel>
                    <ClearableInput id='simpleInput2' />
                </div>
            </div>
            <div className='margin-top-15 text-size-16 text-italic text-color-darker'>
                {isFocusedWithin ? 'Focus is within the block' : 'Focus is outside the block'}
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div>
    <div class="max-width-400 padding-20 border border-color-lighter rounded bg-lightest">
        <div class="text-medium text-size-16 text-color-darker margin-bottom-15">Click inside or outside</div>
        <div>
            <label for="simpleInput1" class="display-inline-block">
                <span>Simple input 1</span>
            </label>
            <div class="ClearableInput input-group">
                <input id="simpleInput1" class="form-control" type="text" tabindex="0" value="">
                <span class="clearButton hide">
                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                    </span>
                </span>
            </div>
        </div>
        <div>
            <label for="simpleInput2" class="display-inline-block">
                <span>Simple input 2</span>
            </label>
            <div class="ClearableInput input-group">
                <input id="simpleInput2" class="form-control" type="text" tabindex="0" value="">
                <span class="clearButton hide">
                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                    </span>
                </span>
            </div>
        </div>
    </div>
    <div class="margin-top-15 text-size-16 text-italic text-color-darker">Focus is outside the block</div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| ref | React.RefObject<HTMLElement> | — | Optional ref to an existing DOM element. If not provided, the hook will return its own ref. |
| onFocusWithin | Function | — | Callback triggered when focus enters the target element or any of its children. |
| onBlurWithin | Function | — | Callback triggered when focus leaves the target element and all of its children. |
| delay | number | — | Optional delay in milliseconds before calling onBlurWithin. Useful when focus quickly shifts inside the container. |