Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/yogendrarana/craftdotui/llms.txt

Use this file to discover all available pages before exploring further.

The Autocomplete component provides a text input with a dropdown list of suggestions that filters as the user types.

​
Installation

import { Autocomplete } from "@craftdotui/baseui/components/autocomplete";

​
Usage

This component is built on @base-ui/react’s Autocomplete primitive. Refer to the source code for the complete API and implementation details.
<Autocomplete
  options={[
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'orange', label: 'Orange' },
  ]}
  placeholder="Search fruits..."
/>

​
Features

  • Type-ahead filtering
  • Keyboard navigation
  • Custom rendering of options
  • Async data loading support
  • Multiple selection mode
  • Accessible by default

​
Examples

​
Basic Autocomplete

const fruits = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'orange', label: 'Orange' },
];

<Autocomplete
  options={fruits}
  placeholder="Select a fruit"
/>

​
Controlled

const [value, setValue] = useState('');

<Autocomplete
  value={value}
  onValueChange={setValue}
  options={options}
/>

​
Accessibility

  • Built on @base-ui/react for accessibility
  • ARIA combobox pattern
  • Keyboard navigation support
  • Screen reader announcements