Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA text input that uses the browser's own datalist for suggestions, so there is no popup to build, mobile keyboards show their native picker, and free text is always allowed. Use this when a light suggestion list is enough.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for fields like country, browser or job title where suggestions are a convenience, free text is fine, the list is short, and you want no JavaScript popup, no focus management and the best mobile behaviour.
Do not use it when you need rich rows, highlighting, grouping or consistent styling. Browsers render datalists differently and offer no control over them.
It composes input, which the CLI installs for you.
import { NativeDatalistAutocomplete } from "@/components/native-datalist-autocomplete"<NativeDatalistAutocomplete
label="Job title"
hint="Pick one or type your own."
options={jobTitles}
value={title}
onValueChange={setTitle}
/>| Prop | Type | Default | Description |
| ---------------- | ------------------------- | --------------------- | --------------------------------------------- | ------------ |
| options | (string \\ | { value, label? })[] | - | Suggestions. |
| value | string | - | The text (controlled). |
| defaultValue | string | "" | Initial text. |
| onValueChange | (value: string) => void | - | Runs on every change. |
| onOptionSelect | (option) => void | - | Runs when the text equals one of the options. |
| label | string | - | Visible label. |
| hint | string | - | Helper text under the field. |
<input list> with a <datalist>; the browser provides the popup, the keyboard model and the mobile picker.<label> and a hint remain, because datalist announcements differ by browser and platform.autocomplete="off" stops the browser's history from covering your list.onOptionSelect when the text exactly matches an option, ignoring case, so you can treat a pick differently from typing.The pattern ships with a Testing Library test (native-datalist-autocomplete.test.tsx) that covers the datalist wiring, the exact-match callback and free text.