# InputGroup

Composes bare `InputGroupInput` controls with `InputGroupText` addons for prefixed or suffixed fields. Owns its own field chrome rather than wrapping `TextField` / `NumberInput`.

## Examples

### Default

Place an `InputGroupText` addon before (or after) an `InputGroupInput` inside the group.

```tsx
import { InputGroup, InputGroupInput, InputGroupText } from '@var-ui/react';

<InputGroup label="Price">
  <InputGroupText>$</InputGroupText>
  <InputGroupInput aria-label="Price" />
</InputGroup>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

### Prefix and suffix addons

Stack multiple `InputGroupText` children on either side of the input so borders join into one control.

```tsx
import { InputGroup, InputGroupInput, InputGroupText } from '@var-ui/react';

<InputGroup label="Website">
  <InputGroupText>https://</InputGroupText>
  <InputGroupInput aria-label="Website" placeholder="example" />
  <InputGroupText>.com</InputGroupText>
</InputGroup>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| label | string | yes |  | Visible label rendered above the group. |
| children | ReactNode | no |  | Plain `<input>`s (see `InputGroupInput`) and `InputGroupText` addons. |
| className | string \| undefined | no |  | Additional CSS class names merged onto the root element. |
| description | string \| undefined | no |  | Helper text shown below the group when there is no error. |
| errorMessage | string \| undefined | no |  | Validation message; when set, the group is shown in an error state. |
| isDisabled | boolean \| undefined | no |  | Disables the whole group (visually and via `aria-disabled`). |

## Accessibility

The outer control uses `role="group"` with `aria-labelledby` pointing at the visible label. Give each `InputGroupInput` its own accessible name (`aria-label` or `aria-labelledby`) — addon text is visual chrome and is not announced as the input’s name. `errorMessage` is exposed with `role="alert"`.