Components / Forms

Input Group

Compose an input with leading/trailing icons, text, or buttons inside a single bordered control.

Installation

bash

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/input-group/registry.json

Icon addon

InputGroup · leading icon

tsx

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

<InputGroup>
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search lots…" />
</InputGroup>

Prefix and suffix

InputGroup · text addons

AUD

tsx

<InputGroup>
  <InputGroupAddon>
    <InputGroupText>$</InputGroupText>
  </InputGroupAddon>
  <InputGroupInput placeholder="0.00" inputMode="decimal" />
  <InputGroupAddon align="inline-end">
    <InputGroupText>AUD</InputGroupText>
  </InputGroupAddon>
</InputGroup>

With a button

InputGroup · trailing button

tsx

<InputGroup>
  <InputGroupInput placeholder="Invite by email…" />
  <InputGroupAddon align="inline-end">
    <InputGroupButton>Send</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

InputGroupAddon props

Prop	Type	Default	Description
align	"inline-start" \| "inline-end" \| "block-start" \| "block-end"	"inline-start"	Where the addon sits relative to the control.