# ListSearchInput

A controlled search field for list panels, extracted from the app's Profile,
Vault, and Compute toolbars. Search always remains an input. A selected category
can become a badge to make more room for the field while searching.

## Category badge and expanded search

Focus search to fold the category choices into a badge. The input takes the
remaining width and shows a 2px underline matching the category tabs. The badge has no dropdown: its × removes the filter, returning to all categories. Blurring an empty search restores the choices; a nonempty query
keeps its category visible. Category state belongs to the host, not the input.

## Standard underline

The default has a light baseline and fits toolbars that keep every filter visible.
Import `@dreamlake/uikit/styles.css` once with the app's shared tokens.

## Props

| Prop | Type | Default | Purpose |
| --- | --- | --- | --- |
| `query` | `string` | required | Controlled search text. |
| `onQuery` | `(value: string) => void` | required | Receives edits; does not fetch or filter data. |
| `placeholder` | `string` | `search` | Placeholder and accessible input name. |
| `strongUnderline` | `boolean` | `false` | 2px baseline on focus or while a query is present. |
| `filter` | `{ label: string; onRemove: () => void }` | — | Removable filter badge; omit for the unfiltered state. |
| `searchRef` | `RefObject<HTMLInputElement or null>` | — | Focus the underlying input from the host. |
| `onKeyDown` | `KeyboardEventHandler` | — | Additional keyboard handling; preventDefault overrides built-in keyboard handling. |
| `className` | `string` | — | Root layout classes. |

## Keyboard and accessibility

The field is always keyboard focusable. Escape blurs without clearing the query.
Backspace with a collapsed caret at position zero removes the filter, even when
text follows the caret. Selected text, composition, and modified Backspace keep
their native editing behavior. The × button also removes the filter and returns
focus to the input. Neither action changes the query.
Use `searchRef.current?.focus()` for a host-owned shortcut; the component never
registers a global handler. Native `type="search"` and password-manager hints
prevent address and payment autofill prompts. Supply a descriptive placeholder
such as `search notes`, which is also its accessible name.

Use `FilterBar` for a complete toolbar and `InputRoot` for a filled form field.