# useInputContainer

## 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
import { useInputContainer } from '@astryx-vue/core'
```

Put `ref` on the wrapper and on the inner input, then attach `onClick` to `@click` and `onMouseUp` to `@mouseup` on the wrapper. The hook adds `data-pressable-container` to that wrapper on the first click, so nested containers do not fight over the same click.

## 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 element 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

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `options` | `UseInputContainerOptions` | — | Configuration object for the input container. Required. |
| `options.containerRef` | `Ref` | — | Ref to the outer container/wrapper element. Required. |
| `options.inputRef` | `Ref` | — | Ref to the inner input, textarea, or other focusable control. Required. |
| `options.disabled` | `boolean \| MaybeRefOrGetter<boolean>` | `false` | Whether the input is disabled. Read again on every event. |

## Returns

| Name | Type | Description |
| --- | --- | --- |
| `onClick` | `(event: MouseEvent) => void` | Click handler to attach to the container wrapper. |
| `onMouseUp` | `(event: MouseEvent) => void` | Mouse up handler to attach to the container wrapper. |