AutocompleteNew

A text field that suggests as you type, where any text is still a valid answer.

$ pnpm dlx shadcn@latest add @dashral/autocomplete

City

Value: —

Installation

$ pnpm dlx shadcn@latest add @dashral/autocomplete

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/autocomplete.json

Usage

example.tsx

1import { Autocomplete } from "@/components/dashral/autocomplete"
2
3<Autocomplete label="City" suggestions={cities} value={city} onValueChange={setCity} />

Using the npm package? Import from @dashral/ui/components/autocomplete instead, here and in the examples; the rest is the same.

Examples

Add people

Suggestions with an avatar and an email; onSelect adds one and clears the field.

Assignees

MPMaya PratamaMaya Pratama

Your own search

filter={false} shows your results as they are; loading adds a spinner while they come.

Product

API reference

Autocomplete

Also takes every prop of Input(opens in a new tab).

Prop	Type	Default
`label`	`ReactNode` Shown above, linked to the control.	—
`description`	`ReactNode` A hint under the control.	—
`error`	`boolean \| ReactNode` true shows the error style; a message also shows under the control.	—
`labelAction`	`ReactNode` At the end of the label's row, e.g. a “Forgot password?” link or the current value.	—
`withAsterisk`	`boolean` Marks the label with an asterisk, e.g. alongside required.	`false`
`value / defaultValue`	`string` The text, controlled or initial. Any text is valid.	`""`
`onValueChange`	`(value: string) => void` Called with the new value.	—
`suggestions`	`(string \| { value, description?, icon? })[]` What it suggests. Required.	—
`onSelect`	`(value: string) => void` Called when a suggestion is picked, not on every keystroke.	—
`filter`	`boolean` Narrows the suggestions to those containing the text (ignoring case and accents). false shows them as given, for your own search.	`true`
`loading`	`boolean` A spinner in the list while your suggestions load.	`false`
`limit`	`number` At most this many in the list.	`8`
`prefix / suffix`	`ReactNode` Inside the box, as on Input.	—
`classNames`	`{ root, label, wrapper, input, description, error, content, option }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Keyboard

Keys	Action
`↓`or`↑`	Move through the suggestions (the focus stays in the field)
`Enter`	Pick the highlighted suggestion
`Escape`	Close the list, keeping the text

Accessibility

With label, description or error, the id, aria-describedby and aria-invalid are wired up for you.
The combobox pattern: role="combobox" with aria-expanded and aria-activedescendant pointing at the highlighted option of a listbox.
For a choice from a fixed set, use Combobox: it doesn't accept free text.