Input Group

An input wrapper that supports prefix and suffix addons, buttons, and text.

shadcn/ui docs →

Preview

USD

Installation

terminal
$
Other package managers 
bunx --bun shadcn@latest add https://trents.tech/r/input-group.json

Usage

example.tsx
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
  InputGroupInput,
} from "@/components/ui/input-group"
import { Search } from "lucide-react"

<InputGroup>
  <InputGroupAddon align="inline-start">
    <InputGroupText>$</InputGroupText>
  </InputGroupAddon>
  <InputGroupInput placeholder="0.00" />
  <InputGroupAddon align="inline-end">
    <InputGroupText>USD</InputGroupText>
  </InputGroupAddon>
</InputGroup>

<InputGroup>
  <InputGroupAddon align="inline-start">
    <Search className="size-4" />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search..." />
</InputGroup>
0