Skip to content

Input Group

An input with an icon, text or a button in the same frame. Text add-ons are read with the input.

Sourcecomponents/input-group.tsx
https://
USD

Usage

Input Group usage
import { Copy, Search } from "lucide-react";import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/input-group";
export function InputGroupUsage({ link }: { link: string }) {  return (    <div className="flex flex-col gap-4">      <InputGroup>        <InputGroupAddon decorative>          <Search className="size-5" />        </InputGroupAddon>        <InputGroupInput type="search" aria-label="Search briefs" placeholder="Search briefs" />      </InputGroup>      <InputGroup>        <InputGroupInput readOnly value={link} aria-label="Share link" />        <InputGroupButton variant="ghost" size="icon" aria-label="Copy link" onClick={() => navigator.clipboard.writeText(link)}>          <Copy className="size-5" aria-hidden />        </InputGroupButton>      </InputGroup>    </div>  );}

When to use

Use when

An input with an icon, a prefix or unit ("https://", "USD"), or a button (copy, show password) in the same frame

Don’t use when

A button that submits the whole form; put it after the field