# InputGroup

> A text input joined with a prefix, a suffix or a button.

- **Level**: molecule · **Status**: stable · **Role**: input
- **Import**: `import { InputGroup, InputGroupAction, InputGroupIcon, InputGroupInput, InputGroupPrefix, InputGroupSuffix } from "@rrios-forge/ui/molecules/input-group";`
- **Source**: `packages/ui/src/molecules/input-group`

Compound input wrapper. The group is the focusable surface (focus-within ring sits on the wrapper); the inner Input keeps its native semantics. size, invalid and disabled propagate via context. Prefix and suffix never replace a Label — wrap the InputGroup in a Field. Patterns consulted: Patterns/Forms · FieldAnatomy + SearchAndSelect, Patterns/Density & Growth · MetadataCompression.

## Use it for

- Group of fields → `FormSection` or `InputGroup`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `size` | — | `sm` `md` `lg` | `md` | Ergonomic scale, in three families (control, text, container). |
| `invalid` | — | `true` `false` | `false` | Fails validation: a danger edge, announced as invalid; pair it with an error message. |
| `disabled` | — | `true` `false` | `false` | Not available: dimmed, skipped by the keyboard, ignores the pointer. |

## Stories

- [Playground](/?path=/story/components-molecules-inputgroup--playground) · frame: `/iframe.html?id=components-molecules-inputgroup--playground&viewMode=story`
- [With leading icon](/?path=/story/components-molecules-inputgroup--with-leading-icon) · frame: `/iframe.html?id=components-molecules-inputgroup--with-leading-icon&viewMode=story`
- [With prefix](/?path=/story/components-molecules-inputgroup--with-prefix) · frame: `/iframe.html?id=components-molecules-inputgroup--with-prefix&viewMode=story`
- [With suffix](/?path=/story/components-molecules-inputgroup--with-suffix) · frame: `/iframe.html?id=components-molecules-inputgroup--with-suffix&viewMode=story`
- [With action](/?path=/story/components-molecules-inputgroup--with-action) · frame: `/iframe.html?id=components-molecules-inputgroup--with-action&viewMode=story`
- [Invalid](/?path=/story/components-molecules-inputgroup--invalid) · frame: `/iframe.html?id=components-molecules-inputgroup--invalid&viewMode=story`
- [Disabled](/?path=/story/components-molecules-inputgroup--disabled) · frame: `/iframe.html?id=components-molecules-inputgroup--disabled&viewMode=story`
- [In Field](/?path=/story/components-molecules-inputgroup--in-field) · frame: `/iframe.html?id=components-molecules-inputgroup--in-field&viewMode=story`

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).