Input Group

Input or textarea with inline or block addons: text, icons, buttons, and kbd.

Preview

Inline start

Inline end

.com

Text addons

.com

Button

Kbd

⌘K

Disabled

Invalid

Textarea

0/280

Installation

$ pnpm dlx shadcn@latest add https://stylexcn.vercel.app/r/input-group.json

$ pnpm dlx shadcn@latest add @stylexcn/input-group

Usage

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