<!-- Protocore Design System — Autocomplete -->
# Autocomplete

- **Category:** Inputs (`inputs`)
- **Slug:** `inputs/autocomplete`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { Autocomplete } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/inputs/autocomplete

> Alias of Combobox — a typeahead single-select that filters a list of options as you type.

## An alias of Combobox

**Autocomplete** is the Mantine-familiar name for this library's **Combobox** — the same component under a second name for discoverability. Props are identical (`options`, `value`, `onValueChange`, `placeholder`, …). See the [Combobox](/inputs/combobox) page for the full API and accessibility notes.

## Examples

### Basics

Pass `options`; typing filters them and the highlighted option commits on Enter.

```tsx
import { Autocomplete } from "@protocore/pds";

const SERVICES = [
  { value: "ledger", label: "ledger-api", hint: "grpc" },
  { value: "settlement", label: "settlement-worker", hint: "queue" },
  { value: "gateway", label: "edge-gateway", hint: "http" },
  { value: "indexer", label: "chain-indexer", hint: "batch" },
  { value: "notifier", label: "notifier", hint: "queue" },
];

export default function AutocompleteBasics() {
  return (
    <div style={{ width: 280 }}>
      <Autocomplete options={SERVICES} placeholder="Find a service…" aria-label="Service" />
    </div>
  );
}
```

## Accessibility

**Notes**

- Identical to Combobox: a WAI-ARIA combobox with arrow-key navigation and an `aria-activedescendant`-linked listbox.

## Related

`combobox`, `select`, `search-input`

---

© Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/