Input Group

InstallationCopy Anchor Link

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

UsageCopy Anchor Link

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

<InputGroup>
  <InputGroupInput
    aria-label="Search recordings"
    placeholder="Search recordings…"
  />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

AnatomyCopy Anchor Link

<InputGroup>
  <InputGroupInput /> {/* or <InputGroupTextarea /> */}
  <InputGroupAddon align="inline-start | inline-end | block-start | block-end">
    <InputGroupText />
    <InputGroupButton />
  </InputGroupAddon>
</InputGroup>

An addon's place comes from align, not from where it sits in the markup: write the input first, then its addons.

ExamplesCopy Anchor Link

ButtonsCopy Anchor Link

InputGroupButton is a ghost Button at the one compact size, so it sits inside the 28 px field. Use xs for a word (Copy) and icon-xs for an icon alone (Clear search).

TextareaCopy Anchor Link

With InputGroupTextarea the group grows to fit, and a block-end addon becomes the field's footer: a counter and the send button of a chat composer.

ThemingCopy Anchor Link

AccessibilityCopy Anchor Link

The group is a role="group". Name the input itself: an aria-label, or a FieldLabel when the group sits in a Field. An icon-only InputGroupButton needs an aria-label. A click on an addon's text or icon focuses the input; a click on its button doesn't.

API referenceCopy Anchor Link

InputGroupCopy Anchor Link

Every <div> attribute.

InputGroupAddonCopy Anchor Link

Every <div> attribute, plus:

InputGroupButtonCopy Anchor Link

Every Button prop, plus:

InputGroupInput, InputGroupTextareaCopy Anchor Link

Every Input or Textarea prop, drawn borderless inside the group.

InputGroupTextCopy Anchor Link

Every <span> attribute.