TypeScript · style

prefer-input-group-search

eslint:prefer-input-group-search

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

Default: error
Fix: none
Languages: typescript

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.

Before / after

Executed by this rule’s unit tests.

Before

Do not pair loose search controls

src/search.tsx · focus

import { Search } from 'lucide-react'; import { Input } from '@/components/ui/input'; const field = <div><Search /><Input /></div>;

After

Use the shared input group

src/search.tsx · focus

import { Search } from 'lucide-react'; import { InputGroup, InputGroupAddon, InputGroupInput } from '@/components/ui/input-group'; const field = <InputGroup><InputGroupAddon><Search /></InputGroupAddon><InputGroupInput /></InputGroup>;

Limits

Only Search and Input bindings imported from the recognized shared modules are paired.

Message IDs

preferInputGroup