Input Group

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/input-group

UsageCopy Anchor Link

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

<InputGroup>
  <InputGroupInput aria-label="Search" placeholder="Search" />
  <InputGroupAddon>
    <SearchIcon aria-hidden="true" />
  </InputGroupAddon>
</InputGroup>;

Put InputGroupAddon after the input in the markup, even for start addons. align places it visually, and this keeps the tab order right. Clicking an addon's empty space focuses the input.

TextCopy Anchor Link

Use InputGroupText for prefixes and suffixes.

ButtonCopy Anchor Link

TextareaCopy Anchor Link

Use InputGroupTextarea with align="block-start" or align="block-end" addons to add a toolbar above or below the text.

API referenceCopy Anchor Link

InputGroup and InputGroupAddon accept every <div> attribute. InputGroupText accepts every <span> attribute. InputGroupInput and InputGroupTextarea accept every Input and Textarea prop.

InputGroupAddonCopy Anchor Link