Skip to content
Sarj Sarj Sarj Standards

prefer-input-group-search

Require search icons and shared Input controls in the same visual wrapper to use InputGroup.

preferInputGroup Rule source Tests Catalog JSON

Why

The shared compound control provides consistent spacing, focus behavior, and accessible composition.

Fix

Compose the search icon and field with InputGroup, InputGroupAddon, and InputGroupInput.

Examples

Before — flagged Do not pair loose search controls
src/search.tsx
import { Search } from "lucide-react";
import { Input } from "@/components/ui/input";
import { InputGroup } from "@/components/ui/input-group";
const field = (
  <div>
    <Search />
    <Input />
  </div>
);
After — preferred Use the shared input group
src/search.tsx
import { Search } from "lucide-react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
const field = (
  <InputGroup>
    <InputGroupAddon>
      <Search />
    </InputGroupAddon>
    <InputGroupInput />
  </InputGroup>
);