Input Group

Groups an input with addons such as buttons and icons.

Installation

pnpm dlx shadcn@latest add https://8bit.cnlibs.com/r/input-group.json

Usage

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

<InputGroup className="w-full max-w-sm">
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search..." />
</InputGroup>

With Button

Add a button addon after the input, e.g. to submit a form.