# useInputStatusIcon

## Usage

Builds the on-field status affordance for a bordered input, so every input in the family behaves the same for a given status. The attached variant renders a plain glyph and leaves the text to the message box; the detached variant renders nothing here, because the message box already carries its own icon; the tooltip variant renders a real focusable button whose tooltip is reachable by keyboard, pointer, touch and assistive tech. Use it when building a bordered input, not for field-level messaging.

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

`statusIcon` is a component and `statusIconProps` are its props, so the pair renders as `<component :is="statusIcon" v-bind="statusIconProps" />` inside the input container.

The accessibility wiring stays with `Field` in this port: it already renders the status message as visually hidden text and puts it in the input's `aria-describedby`, and the info-tip button references its own tooltip, so the hook does not return an id of its own.

## Best practices

| Guidance | Practices |
| --- | --- |
| Do | Render `statusIcon` inside the input container with `statusIconProps`. |
| Do | Let it decide when nothing should render; pass `isInGroup` and `statusVariant` through rather than branching at the call site. |
| Don't | Use it to convey the status by icon alone; the tooltip variant is the only one that carries the message, so the others still need a message box. |

## Parameters

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `status` | `FieldStatusInput \| undefined` or a ref / getter of it | — | The input's status (type plus message), or undefined when there is none. |
| `statusVariant` | `'attached' \| 'detached' \| 'tooltip'` or a ref / getter of it | `'attached'` | How the status is presented relative to the input. `tooltip` without a message falls back to the plain glyph. |
| `isInGroup` | `boolean` or a ref / getter of it | `false` | Whether the input sits inside an `InputGroup`, which owns status rendering itself. |

## Returns

| Name | Type | Description |
| --- | --- | --- |
| `statusIcon` | `ComputedRef` | The affordance to render inside the input container: `FieldIcon` for a plain glyph, `FieldInfoTip` for a focusable info-tip button with its tooltip. `null` when no icon should render. |
| `statusIconProps` | `ComputedRef<Record<string, unknown>>` | The props for that component: `type`, plus `text` for the info-tip variant. |