Input Group

Installation

npx shadcn@latest add @kanpeki/input-group

Anatomy

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

Text

Display additional text information alongside inputs.

Button

Add buttons to perform actions within the input group.

Tooltip

Add tooltips to provide additional context or help.

Textarea

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

Spinner

Show loading indicators while processing input.

Label

Add labels within input groups to improve accessibility.

Dropdown

Pair input groups with dropdown menus for complex interactions.

Button Group

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

API Reference

InputGroup.Root

The main component that wraps inputs and addons.

InputGroup.Addon

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

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

InputGroup.Button

Displays buttons within input groups.

InputGroup.Text

Displays text content within input groups.

InputGroup.Input

Replacement for Input when building input groups. Has input group styles pre-applied.

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

InputGroup.Textarea

Replacement for Textarea when building input groups. Has textarea group styles pre-applied.

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