# Search with results
> Search field with fuzzy matching, highlighted letters and a pixel highlight that springs between results; `hotkey` makes "/" focus it.
- React: `import { PxSearch } from "@/components/lumesec/px-search"`
- Collection: Pixel UI (https://elements.lumesec.ai/components/pixel-ui)
- Registry item: https://elements.lumesec.ai/r/px-search.json
- Page: https://elements.lumesec.ai/components/pixel-ui/search



Live preview: https://elements.lumesec.ai/view/px-search

Demo source:

```tsx
import { PxSearch } from "@/components/lumesec/px-search";

export default function PxSearchDemo() {
  return (
    <div className="w-full max-w-[400px] rounded-[14px] border border-border bg-card px-5 py-[18px] shadow-[0_14px_34px_-20px_rgb(0_0_0/0.4)]">
      <PxSearch hotkey />
    </div>
  );
}
```

## Playground

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

## Installation

```bash
npx shadcn@latest add @lumesec/px-search
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-search.json
```

## Usage

React:

```tsx
import { PxSearch } from "@/components/lumesec/px-search";

export function Example() {
  return (
    <PxSearch
      hotkey
      label="Search pages"
      placeholder="Search pages"
      items={["Billing", "API keys", "Webhooks", "Team members"]}
      onSelect={(item) => console.log("open", item)}
    />
  );
}
```

## Behaviour

Fuzzy matching with highlighted letters, a scanning line while it searches and a pixel highlight that springs between results. With `hotkey`, “/” focuses it from anywhere.

## API reference

### Props

Also accepts every prop of `<div>` (`React.ComponentProps<"div">`), spread onto the root element.

| Prop            | Type                                     | Default             | Description                                                                                                               |
| --------------- | ---------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| `items`         | `readonly string[]`                      | `demo list`         | Entries to search. Defaults to a demo list of 14 settings pages.                                                          |
| `value`         | `string`                                 | —                   | Controlled query. Use with `onValueChange`.                                                                               |
| `defaultValue`  | `string`                                 | `""`                | Initial query when uncontrolled.                                                                                          |
| `hotkey`        | `boolean`                                | `false`             | Pressing "/" anywhere on the page focuses the field, unless focus is already in an input, textarea or editable element.   |
| `label`         | `string`                                 | `"Search settings"` | Accessible name of the field.                                                                                             |
| `placeholder`   | `string`                                 | `"Search settings"` | Placeholder of the field.                                                                                                 |
| `disabled`      | `boolean`                                | `false`             | Dims the component, disables the field and turns off the hotkey.                                                          |
| `onValueChange` | `(query: string) => void`                | —                   | Called with the query on every edit.                                                                                      |
| `onSearch`      | `(query: string, count: number) => void` | —                   | Called after each search with the query and the total number of matches. Typing searches 280 ms after the last keystroke. |
| `onSelect`      | `(item: string) => void`                 | —                   | Called when a result is chosen with Enter or a click.                                                                     |

### Ref

`ref` points at the root `HTMLDivElement`.

## Keyboard

| Keys                | Action                                                                                                              |
| ------------------- | ------------------------------------------------------------------------------------------------------------------- |
| /                   | Focus the field from anywhere on the page (with `hotkey`).                                                          |
| ArrowDown / ArrowUp | Move the highlight, wrapping at the ends.                                                                           |
| Enter               | Choose the highlighted result. Pressed before the pending search ran, it searches first and chooses the best match. |
| Escape              | Clear the query and show the suggestions again.                                                                     |

## Accessibility

* The input has `role="combobox"`, `aria-expanded="true"`, `aria-controls` pointing at the results, `aria-autocomplete="list"` and `aria-activedescendant` on the highlighted result.
* Results are a `role="listbox"` labelled "Results" with `role="option"` items and `aria-selected`; the no-match row has `aria-disabled="true"`.
* A status line in an `aria-live="polite"` region announces the result count and the chosen entry.
* The highlight canvas is `aria-hidden`.
* Reduced motion: the search runs without the 280 ms delay and the scanning line, results appear without sliding in, and the highlight jumps instead of springing.

## Theming

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--foreground`, `--muted-foreground`, `--card`, `--border`, `--lumesec` and `--lumesec-shine`.

## Notes

* Ships with demo data: 14 settings entries such as "Billing and invoices" and "API keys". Pass `items` to search your own list, and `label` and `placeholder` to describe it.
* An empty query shows the first five entries as suggestions; a query shows up to six matches, best first, with matched letters wrapped in `<mark>`.
* The result list stays visible; there is no popup to open or close.
* Not a form control: it has no `name` and submits nothing.
* The "/" key hint in the field shows only with `hotkey`. Changing `items` searches them again with the current query.