Component

Autocomplete

A combobox input for filtering suggestions, selecting an option, and keeping keyboard control intact.

Preview

AssigneeType to filter the suggestion list.

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { Autocomplete } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/autocomplete.json

Copied source import

code

import "@/styles/axie.css";import { Autocomplete } from "@/components/axie/autocomplete";

Prefer @axie/autocomplete? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { Autocomplete, Field } from "axie-ui";export function Example() {  return (    <Field label="Assignee">      <Autocomplete        options={[          { label: "Mira Vale", value: "mira" },          { label: "Talia Nox", value: "talia" }        ]}        placeholder="Search people..."      />    </Field>  );}

Accessibility

Keep a visible label outside the input.
Make arrow keys, Enter, and Escape work predictably for the suggestion list.
Do not hide required choices in autocomplete when the list is short enough for radio or select.

Empty state

Use concise empty text when a query has no matches.

API Reference

Prop	Type	Default	Description
options	AutocompleteOption[]	-	Suggested items shown in the listbox.
value	string	-	Controlled input text.
defaultValue	string	-	Initial input text for uncontrolled usage.
onValueChange	(value, option?) => void	-	Called when the input text changes or an option is selected.
onOptionSelect	(option) => void	-	Called with the full option after selection.
emptyText	ReactNode	No matches found.	Empty-state content for a filtered list.
...props	InputHTMLAttributes<HTMLInputElement>	-	Native input props like name, disabled, placeholder, and aria attributes.