Input Group

Add addons, buttons, and helper content to inputs.

Installation

Add the input group component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/input-group.json

Usage

tsx

import { InputGroup } from "@/components/ui/input-group"

Examples

Inline-end addon

Addon after the control

USD

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

<InputGroup className="w-64">
  <InputGroupInput placeholder="Amount" />
  <InputGroupAddon align="inline-end">
    <InputGroupText>USD</InputGroupText>
  </InputGroupAddon>
</InputGroup>

With button

InputGroupButton

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

<InputGroup className="w-64">
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon align="inline-end">
    <InputGroupButton>Go</InputGroupButton>
  </InputGroupAddon>
</InputGroup>