SearchField

The magnifier is part of the field, not a sibling, so the hit area is the whole pill. The trailing slot is for a shortcut hint or a clear button.

import { KeyHint, SearchField } from '@andrewbehma/glass-ui';
import { Search } from 'lucide-react';

Playground

SearchField.tsx

import { KeyHint, SearchField } from '@andrewbehma/glass-ui';
import { Search } from 'lucide-react';

<SearchField
  aria-label="Search"
  placeholder="Search components"
  trailing={<KeyHint keys="Mod+K" />}
/>

States

Each tile is the live component. Open one in the playground to keep tweaking it.

With shortcut
Plain