pnpm add @wandercom/design-system-web

The search input component provides a ready-to-use search field with a magnifying glass icon. It's built using the InputGroup component with pre-configured styling.

import { InputGroupIcon } from '@wandercom/design-system-web/ui/search-input';

export function Example() {
  return <InputGroupIcon />;
}

The search input supports two size variants: default (h-12) and sm (h-10).

This component provides a pre-configured search input pattern that combines the InputGroup, InputGroupInput, and InputGroupAddon components with a search icon. It's designed for quick implementation of common search interfaces.

The component uses:

• InputGroup for the container structure
• InputGroupInput for the text input field
• InputGroupAddon for icon placement
• IconMagnifyingGlass for the search icon

For more control over the search input behavior, icons, or layout, use the InputGroup component directly. See the Input Group documentation for available options and patterns.

import { InputGroup, InputGroupAddon, InputGroupInput } from '@wandercom/design-system-web/ui/input-group';
import { IconMagnifyingGlass } from '@central-icons-react/round-outlined-radius-2-stroke-1.5/IconMagnifyingGlass';

export function CustomSearch() {
  return (
    <InputGroup>
      <InputGroupAddon align="inline-start">
        <IconMagnifyingGlass />
      </InputGroupAddon>
      <InputGroupInput
        type="search"
        placeholder="Search properties..."
        aria-label="Search"
      />
    </InputGroup>
  );
}

When implementing search functionality:

• Use type="search" on the input for semantic meaning
• Include an aria-label or associated label for screen readers
• Consider adding clear functionality for better user experience
• Ensure keyboard navigation works as expected

For search forms, wrap the input in a <form> element to enable submit on Enter key.