Input Group

Input Group combines one form control with contextual text, icons, or compact actions inside a shared technical frame. Addons can sit before or after the control, or occupy their own block row.

Use it when the surrounding content changes how users interpret or operate the field: a protocol prefix, unit suffix, search action, or short instruction. Keep ordinary labels and validation messages outside the group.

Live previewInteractive / Local

Command path

~/bin/

.sh

Registry query

Installation

Sourcebash

pnpm dlx shadcn@latest add http://ui.argv-tech.dev/r/input-group.json

Usage

Sourcetsx

import {
    InputGroup,
    InputGroupAddon,
    InputGroupInput,
    InputGroupText
} from "@/components/ui/argv/input-group"

<InputGroup>
    <InputGroupAddon align="inline-start">
        <InputGroupText>https://</InputGroupText>
    </InputGroupAddon>
    <InputGroupInput aria-label="Domain" placeholder="example.com" />
</InputGroup>

Composition

Sourcetext

InputGroup
├── InputGroupAddon (optional)
│   └── InputGroupText or InputGroupButton
├── InputGroupInput or InputGroupTextarea
└── InputGroupAddon (optional)
    └── InputGroupText or InputGroupButton

Inline addons share the control row. Block addons create a full-width row above or below the control; use them for short instructions or status, not long help text. Clicking a non-button addon moves focus to the group control.

InputGroupButton defaults to type="button" and the ghost variant so it does not submit a surrounding form unexpectedly. Pass another argv button variant when the action needs stronger emphasis.

API Reference

Component	Key props
`InputGroup`	Native `div` props; renders `role="group"`
`InputGroupAddon`	`align="inline-start"` \| `"inline-end"` \| `"block-start"` \| `"block-end"`
`InputGroupInput`	Native input props
`InputGroupTextarea`	Native textarea props
`InputGroupButton`	Button props plus `size="xs"` \| `"sm"` \| `"icon-xs"` \| `"icon-sm"`
`InputGroupText`	Native span props

InputGroupAddon defaults to align="inline-start". InputGroupButton defaults to size="xs", variant="ghost", and type="button".

Accessibility

The nested input or textarea still needs its own accessible name. Connect a visible label to the control with id and htmlFor, or use aria-label when the design cannot include a visible label.

Give every icon-only InputGroupButton an aria-label. Addons provide visual context but do not automatically label the control.