Shadcn Input Group

An input group is one bordered control: the field plus icons, text, buttons, or a kbd. The wrapper owns the border and the focus ring; the inner input is borderless. Use it for search, URL prefixes, password actions, and prompt boxes with a toolbar.

Usage

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

<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

align on InputGroupAddon places the addon. Put the addon after the input in the DOM so tab lands on the field first.

Composition

Align

align="inline-start" is the default. Also inline-end, block-start, and block-end.

Icon

Icons in an addon. Click the icon and the input focuses.

Text

InputGroupText for prefixes, suffixes, and counters.

Button

InputGroupButton is sized for the group — xs or icon-xs. Ghost by default.

Kbd

A shortcut hint on the end. The addon rounds nested kbd to match.

Dropdown

A menu trigger as the addon button — file actions or a search-in picker.

Spinner

Loading on either side. Pair with muted text if the wait needs a label.

Textarea

InputGroupTextarea plus block-start / block-end for a header and a toolbar.

Custom Input

Any control with data-slot="input-group-control" gets the group's focus ring.

Inline End

Addon on the inline-end edge. Icons and buttons sit after the value.

Block Start

Addon above the field. A label or a toolbar that belongs to the group.

Block End

Addon below the field. Helper text that still sits inside the ring.

RTL

Wrap with DirectionProvider and dir="rtl". Addons follow the reading direction.

API

InputGroup is a div with role="group". Focus and aria-invalid on the control restyle the whole group via has-*.

InputGroupAddon

InputGroupButton

InputGroupInput and InputGroupTextarea pass through to Input and Textarea. They set data-slot="input-group-control". InputGroupText is a span.

Notes

aria-invalid on the control tints the whole group's border.

With other components

Questions

Related