# useIndicatorFocusRing

## Usage

Draws the standard focus ring on the indicator of a control whose real input is visually hidden; a checkbox or radio focuses an opacity-0 input, so the ring has to appear on the picture beside it. The ring is painted on the indicator's own element, which is the only element whose border-radius can shape it, and only on `:focus-visible`, so pointer clicks stay quiet. Owning it here means a theme-supplied indicator cannot ship a control with no visible focus (WCAG 2.4.7) by ignoring a prop.

```ts
import { useIndicatorFocusRing } from '@astryx-vue/core'
```

The ring is drawn by the `styles/indicator-focus-ring.css` stylesheet that this hook brings along: the hook marks the indicator with `data-astryx-focus-ring` and the stylesheet paints the outline from the theme's focus tokens. In a template, bind `focusProps.onFocus` to `@focusin` and `focusProps.onBlur` to `@focusout` on the wrapper, because a `focus` event does not bubble in the DOM.

## Best practices

| Guidance | Practices |
| --- | --- |
| Do | Wrap only the indicator in the ref'd element; a wrapper holding label text would ring the whole row. |
| Do | Bind `focusProps` on the element that contains the hidden input (`@focusin` / `@focusout`), not on the input itself. |
| Don't | Ask a themeable indicator to draw its own focus ring; a replacement that ignores the prop leaves the control with no visible focus. |

## Parameters

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `containerRef` | `Ref` | — | Ref to an element wrapping only the indicator, so its single element child is unambiguously the thing to ring. Required. |
| `isDisabled` | `boolean \| MaybeRefOrGetter<boolean>` | `false` | Skip the ring; a disabled control is not focusable. |

## Returns

| Name | Type | Description |
| --- | --- | --- |
| `focusProps` | `{ onFocus: (event: FocusEvent) => void, onBlur: () => void }` | Bind on the element that owns the focusable input: `onFocus` to `@focusin`, `onBlur` to `@focusout`. |