Input Group

Add addons, buttons, or helper content alongside an input or textarea.

Last updated January 1, 1980

Overview

Installation

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

Usage

import {
 
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group"
 
export function Example() {
  return (
    <InputGroup>
      <InputGroupInput placeholder="Search..." />
      <InputGroupAddon>
        <SearchIcon />
      </InputGroupAddon>
    </InputGroup>
  )
}

Composition

Use the following composition to build an InputGroup:

InputGroup
├── InputGroupInput or InputGroupTextarea
├── InputGroupAddon
├── InputGroupButton
└── InputGroupText

Examples

For proper focus management, InputGroupAddon should always be placed after InputGroupInput or InputGroupTextarea in the DOM. Use the align prop on InputGroupAddon to position the addon relative to the input.

Inline start

Inline end

Block start

Block end

Icon

Text

Button

Kbd

Dropdown

Spinner

Textarea

Custom Input

Add the data-slot="input-group-control" attribute to any custom input for automatic focus-state styling. Here's a custom auto-resizing textarea from a third-party library.

RTL

API Reference