Skip to content

Input Group

Groups an input or textarea with icons, text, buttons, and keyboard hints inside a single field container.

Input Group
/

Installation

pnpm dlx shadcn@latest add @sortui/input-group

Usage

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
  InputGroupInput,
  InputGroupTextarea,
} from "@/components/ui/input-group"

Examples

Sizes

/
/
/

Icon

Text

$
USD
@company.com
https://
.com

Button

Alignment

INV-
days
Client
Shown on the invoice PDF

Dividers

https://
.com
What changed in 2.5.0?

Disabled

Choose a unique username for your account.

Loading

example.com/
Checking

Character count

8/24

Shown on your profile and comments.

Ship your next project this week

Get the full Figma kit, the code of 180+ sections and every future update for one payment.

Get Pro Access