Autocomplete

Search input with suggestions dropdown.

formsearchinput

Import

import { Autocomplete } from "@/components/ui";

Basic Usage

Autocomplete Preview

Framework

Code

tsx

<Autocomplete
  options={[
    { value: "react", label: "React" },
    { value: "vue", label: "Vue" },
    { value: "angular", label: "Angular" },
  ]}
  placeholder="Search frameworks..."
/>

Async Search

Load options on search

1const [options, setOptions] = useState([]);
2const [loading, setLoading] = useState(false);
3
4const handleSearch = async (query) => {
5  setLoading(true);
6  const results = await searchUsers(query);
7  setOptions(results);
8  setLoading(false);
9};
10
11return (
12  <Autocomplete
13    options={options}
14    onSearch={handleSearch}
15    loading={loading}
16    placeholder="Search users..."
17  />
18);

Free Solo

Allow custom values

1<Autocomplete
2  options={commonEmails}
3  freeSolo
4  placeholder="Enter email..."
5/>

With Custom Render

Custom option rendering

1<Autocomplete
2  options={users}
3  renderOption={(option) => (
4    <div className="flex items-center gap-2">
5      <Avatar size="sm" name={option.label} />
6      <span>{option.label}</span>
7    </div>
8  )}
9  placeholder="Search users..."
10/>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring