InputGroup

A wrapper component that groups inputs with addons, buttons, and text elements.

Basic

Sizes

The size prop on InputGroup automatically propagates to all child components.

With text addon

With button

With keyboard shortcut

Addon alignment

Addons can be positioned at inline-start (default), inline-end, block-start, or block-end.

With textarea

Segmented

Full-height end caps (product box clear, sync reset, NumberInput ±). The shell owns the outer radius and clips children — use InputGroupFace for the main control and InputGroupSegment for actions (optional divider border toward the control).