Input Group

You might be looking for:

• Button Group

  Join related buttons into one control.

Examples

Buttons and shortcuts

Inline-end addons hold compact buttons (icon-xs for icon-only, xs for text) or a Kbd hint.

Textarea with block addons

block-start / block-end addons span the full width — useful for a footer row under a message box.

Usage

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

<InputGroup>
  <InputGroupAddon>
    <MagnifyingGlassIcon />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search" />
  <InputGroupAddon align="inline-end">
    <InputGroupButton size="icon-xs" aria-label="Clear">
      <XIcon />
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

The wrapper carries the border, focus ring, and background — the inner control is unstyled. Use InputGroupInput / InputGroupTextarea (not the bare primitives) so the control blends in. The portal sign-in password field with its visibility toggle is built from this.

Props

InputGroup, InputGroupText, InputGroupInput, and InputGroupTextarea have no props of their own — they accept their native element's attributes.

InputGroupAddon

InputGroupButton

Also accepts every Button prop except size, which is replaced by the compact ladder below.

Tokens

Input Group reads --input-* when standalone, --field-control-* inside a Field card, and --dropdown-* for the chip button. Fallbacks keep apps without those tokens on the previous look.

Changelog

• 3 October 2026 — Dark standalone fill tracks Field (one step above the card). Full notes
• 8 September 2026 — Standalone corners use 16px (--radius-2xl) on product tokens. Full notes
• 19 August 2026 — “You might be looking for” map to Button Group. Full notes
• 18 August 2026 — Styles live in a CSS module; look and tokens unchanged. Full notes
• 22 July 2026 — Soft standalone styling shared with Input / Textarea / Select. Full notes
• 22 July 2026 — Note-style footers get footnote type and more vertical room for icon-button hover. Full notes
• 14 July 2026 — Component page added (was in the library undocumented). Full notes