Docs
Components
Input Group

Input Group

Display additional information or actions to an input or textarea.

Preview

Code

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/input-group

Anatomy

Single import

Multiple imports

import { InputGroup } from "~/components/ui/input-group";

<InputGroup.Root>
  <InputGroup.Input placeholder="Search..." />
  <InputGroup.Addon>
    <SearchIcon />
  </InputGroup.Addon>
  <InputGroup.Addon align="inline-end">
    <InputGroup.Button>Search</InputGroup.Button>
  </InputGroup.Addon>
</InputGroup.Root>;

Examples

Icon

Preview

Code

Text

Display additional text information alongside inputs.

Preview

Code

USD

https://

.com

@company.com

120 characters left

Button

Add buttons to perform actions within the input group.

Preview

Code

https://

Add tooltips to provide additional context or help.

Preview

Code

Textarea

Input groups also work with textarea components. Use block-start or block-end for alignment.

Preview

Code

Line 1, Column 1

script.js

Spinner

Show loading indicators while processing input.

Preview

Code

Saving...

Please wait...

Label

Add labels within input groups to improve accessibility.

Preview

Code

Pair input groups with dropdown menus for complex interactions.

Preview

Code

Button Group

Wrap input groups with button groups to create prefixes and suffixes.

Preview

Code

https://

.com

API Reference

InputGroup.Root

The main component that wraps inputs and addons.

Prop	Type	Default
`className`	`string`

<InputGroup.Root>
  <InputGroup.Input />
  <InputGroup.Addon />
</InputGroup.Root>

InputGroup.Addon

Displays icons, text, buttons, or other content alongside inputs.

For proper focus navigation, the InputGroup.Addon component should be placed after the input. Set the align prop to position the addon.

Prop	Type	Default
`align`	`"inline-start" \| "inline-end" \| "block-start" \| "block-end"`	`"inline-start"`
`className`	`string`

<InputGroup.Addon align="inline-end">
  <SearchIcon />
</InputGroup.Addon>

For InputGroup.Input, use the inline-start or inline-end alignment. For InputGroup.Textarea, use the block-start or block-end alignment.

The InputGroup.Addon component can have multiple InputGroup.Button components and icons.

<InputGroup.Addon>
  <InputGroup.Button>Button</InputGroup.Button>
  <InputGroup.Button>Button</InputGroup.Button>
</InputGroup.Addon>

InputGroup.Button

Displays buttons within input groups.

Prop	Type	Default
`size`	`"xs" \| "icon-xs" \| "sm" \| "icon-sm"`	`"xs"`
`variant`	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"`	`"ghost"`
`className`	`string`

<InputGroup.Button>Button</InputGroup.Button>
<InputGroup.Button size="icon-xs" aria-label="Copy">
  <CopyIcon />
</InputGroup.Button>

InputGroup.Input

Replacement for Input when building input groups. This component has the input group styles pre-applied and uses the unified data-slot="input-group-control" for focus state handling.

Prop	Type	Default
`className`	`string`

All other props are passed through to the underlying Input component.

<InputGroup.Root>
  <InputGroup.Input placeholder="Enter text..." />
  <InputGroup.Addon>
    <SearchIcon />
  </InputGroup.Addon>
</InputGroup.Root>

InputGroup.Textarea

Replacement for Textarea when building input groups. This component has the textarea group styles pre-applied and uses the unified data-slot="input-group-control" for focus state handling.

Prop	Type	Default
`className`	`string`

All other props are passed through to the underlying Textarea component.

<InputGroup.Root>
  <InputGroup.Textarea placeholder="Enter message..." />
  <InputGroup.Addon align="block-end">
    <InputGroup.Button>Send</InputGroup.Button>
  </InputGroup.Addon>
</InputGroup.Root>

Form Input OTP