Chakra UI Autocomplete

Overview

This product is called Chakra-UI AutoComplete and it is an accessible autocomplete utility for Chakra UI that composes Downshift ComboBox. It is currently a work in progress and may have missing features.

Features

• Composes Downshift ComboBox for autocomplete functionality.
• Supports both TSX/Typescript and JSX/Javascript usage examples.
• Allows for custom item rendering.
• Supports custom style props for labels, input fields, and toggle buttons.

Installation

To install Chakra-UI AutoComplete, use the following code snippets:

npm install chakra-ui-autocomplete

import { Autocomplete } from 'chakra-ui-autocomplete';
import { Box } from '@chakra-ui/react';

// Usage example
const items = ['Apple', 'Banana', 'Cherry'];
const Example = () => (
  <Box w="300px">
    <Autocomplete
      items={items}
      placeholder="Search for fruits"
      label="Fruits"
      onCreateItem={(value) => console.log(value)}
    />
  </Box>
);

You can view a live demo on CodeSandbox.

Summary

Chakra-UI AutoComplete is an accessible autocomplete utility for Chakra UI that composes Downshift ComboBox. It allows for easy implementation of autocomplete functionality with customizable item rendering and style props. However, it is currently a work in progress with the possibility of missing features.