Input Group

Install

pnpm dlx shadcn@latest add @namche/input-group

Usage

import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText } from '@/components/ui/input-group';

<InputGroup>
  <InputGroupAddon>
    <InputGroupText>$</InputGroupText>
  </InputGroupAddon>
  <InputGroupInput type="number" defaultValue={480} />
  <InputGroupAddon align="inline-end">
    <InputGroupText>USD / month</InputGroupText>
  </InputGroupAddon>
</InputGroup>

InputGroupAddon takes an align of inline-start | inline-end | block-start | block-end — the first two sit beside InputGroupInput as a prefix or suffix, the latter two stack above or below it (pairs naturally with InputGroupTextarea for a toolbar row). InputGroupButton is a compact Button sized for the addon slot (xs by default); clicking anywhere else in an addon focuses the inner control. Swap InputGroupInput for InputGroupTextarea for multi-line content — the group grows to fit it automatically.