Forms

Input group

An input or textarea with addons inside the same pill: icons, text, buttons, at either end or above and below.

packages/design-system/components/ui/input-group.tsx

Examples

Icon at the start
https://
Text and a button
0 of 500
Textarea with a toolbar below

Anatomy

  1. 01Group, the pill
  2. 02Control: InputGroupInput or InputGroupTextarea
  3. 03Addons, ordered by align
  4. 04Text and buttons inside addons

Usage

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

<InputGroup>
  <InputGroupInput placeholder="Search projects" />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
  <InputGroupAddon align="inline-end">
    <InputGroupButton>Go</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Props

PropTypeDefaultDescription
InputGroupAddon align"inline-start" | "inline-end" | "block-start" | "block-end""inline-start"Where the addon sits. Block alignments stack it above or below and let the group grow.
InputGroupButton size"xs" | "sm" | "icon-xs" | "icon-sm""xs"Smaller than a Button so it fits inside the pill.
InputGroupButton variantButton variant"ghost"Any Button variant.
InputGroupButton type"button" | "submit" | "reset""button"Button by default, so it never submits a form by accident.
classNamestringnoneMerged last with cn(). Use it for layout (width, margin), not to restyle the component.

Guidance

Do

  • Put the addons after the control in the markup; align orders them.

Don't

  • Nest a plain Input. Use InputGroupInput so focus rings the whole group.