GitHub

Go to...

Choose a page to open.

An input or textarea with icons, text, or buttons attached to its edges.

Input Group

input-group-demo

Installation

pnpm dlx shadcn@latest add https://ui.n2020.com/r/input-group.json

Usage

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
<InputGroup>
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search invoices" />
</InputGroup>

The align prop of InputGroupAddon sets the edge: inline-start, inline-end, block-start, or block-end.

Examples

Button

input-group-with-button

Textarea

input-group-with-textarea