useInputStatusIcon @astryx-svelte/core v0.5.2 · hooks
Usage
Builds the on-field status affordance for a bordered input and its accessibility wiring, 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
Best practices
| Guidance | Practices |
|---|---|
| Do | Render statusIcon inside the input container and merge describedBy into the control's aria-describedby list. |
| Do | Let it decide when nothing should render; pass isInGroup and the variant 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
| Parameter | Type | Default | Description |
|---|---|---|---|
options Required | () => UseInputStatusIconOptions | — | Configuration object. |
options.status | InputStatus | — | The input's status (type plus message), or undefined when there is none. |
options.statusVariant | 'tooltip' | 'attached' | 'detached' | 'attached' | How the status is presented relative to the input. |
options.isInGroup | boolean | false | Whether the input sits inside an InputGroup, which owns status rendering itself. |
options.size | 'sm' | 'md' | 'lg' | 'xsm' | 'md' | Size of the on-field icon. |
Returns
| Field | Type | Default | Description |
|---|---|---|---|
statusIcon | string | Snippet | — | The affordance to render inside the input container: a plain icon, or a focusable info-tip button with its tooltip. Null when no icon should render. Not declared by
core, so this type is mapped from upstream's rather than read from the compiler.Upstream declares |
describedBy | string | — | ID to add to the input's aria-describedby, present exactly when a tooltip element is in the DOM, so there is never a dangling reference. |