InputGroup

Display additional information or actions alongside input fields

Installation

pnpm add @wandercom/design-system-web

Usage

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupButton,
  InputGroupText,
} from '@wandercom/design-system-web/ui/input-group';

export function Example() {
  return (
    <InputGroup>
      <InputGroupAddon>
        <SearchIcon />
      </InputGroupAddon>
      <InputGroupInput placeholder="Search..." />
    </InputGroup>
  );
}

Examples

Sizes

Input groups support two size variants that match the Input component.

Loading example...

With icon

Add icons to provide visual context for input fields.

Loading example...

With text prefix or hint

Display static text prefixes like protocols (hint) or inline prefix labels.

Loading example...

Block positioning

Position addons above or below the input for vertical layouts.

Loading example...

Props

InputGroup

size?:

"default" | "sm"
Size variant of the input group. Defaults to "default".

className?:

string
Additional CSS classes to apply to the group container.

InputGroupAddon

align?:

"inline-start" | "inline-end" | "hint" | "block-start" | "block-end"
Position of the addon relative to the input. Use "hint" for flush text prefixes (e.g. "https://"). Defaults to "inline-start".

className?:

string
Additional CSS classes to apply to the addon container.

InputGroupButton

size?:

"xs" | "sm" | "icon-xs" | "icon-sm" | "icon-md"
Button size variant. Defaults to "sm".

variant?:

"primary" | "secondary" | "outline" | "ghost" | "destructive" | "checkout"
Button visual style variant. Defaults to "ghost".

type?:

"button" | "submit" | "reset"
HTML button type attribute. Defaults to "button".

className?:

string
Additional CSS classes to apply to the button.

InputGroupText

className?:

string
Additional CSS classes to apply to the text span.

InputGroupInput

Inherits font size, line height, and padding from the parent InputGroup size variant automatically.

className?:

string
Additional CSS classes to apply to the input element.

type?:

string
HTML input type attribute (text, email, password, etc.).

Accessibility

The InputGroup component includes proper accessibility features:

  • Uses role="group" to indicate grouped elements
  • Focus states are properly managed across the group
  • Invalid states are visually indicated with aria-invalid
  • Clicking on addons focuses the input for better usability

For proper focus navigation, the InputGroupAddon component should be placed after the input element when using inline-end alignment.

InputGroup