Usage
Makes an input container wrapper clickable, delegating focus to the inner input/textarea when the user clicks non-interactive areas (icons, padding, status indicators). Built on top of useClickableContainer, so nested interactive elements (clear buttons, calendar toggles, links) are handled safely; clicking them does NOT steal focus from the input. Automatically detects input type: text-like inputs receive .focus(), while other types (checkbox, radio, file) receive .click().
ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Use inside input wrapper components (TextInput, NumberInput, TimeInput, TextArea) to make the full container area clickable. |
| Do | Attach both onClick and onMouseUp to the wrapper div for full interaction handling. |
| Don't | Use on bare inputs without a wrapper; there is no benefit if the input already fills the full clickable area. |
Parameters
| Param | Type | Description |
|---|---|---|
optionsrequired | Configuration object for the input container. | |
options.containerRefrequired | RefObject<HTMLElement | null> | Ref to the outer container/wrapper element. |
options.inputRefrequired | RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLElement | null> | Ref to the inner input or textarea element. |
options.disabled | boolean (default: false) | Whether the input is disabled. |
Returns
| Field | Type | Description |
|---|---|---|
| onClick | (event: MouseEvent<HTMLElement>) => void | Click handler to attach to the container wrapper. |
| onMouseUp | (event: MouseEvent<HTMLElement>) => void | Mouse up handler to attach to the container wrapper. |
Examples
Common configurations, variations, and states.A custom search field wrapper: useInputContainer's handlers focus the inner input when the leading icon or the padding is clicked, while the nested Clear button keeps its own click behavior.
Use with shadcn
Already using the shadcn registry workflow? Install the real Astryx package and a local public re-export. Component implementation source stays in Astryx.
This install URL expires with the draft preview.bash