Overview

The Chakra UI Simple Autocomplete is a user interface component that provides a simple autocomplete input functionality. It is built with Chakra UI, a popular component library for building React applications. The autocomplete input allows users to type in a search term and the component displays a list of options that match the search term. The selected options are stored in a state and can be accessed through a callback function. The component also provides options for customizing the appearance and behavior, such as rendering a badge for selected options, customizing icons, and allowing the creation of new tags.

Features

• Options: An array of options to render on the autocomplete input.
• Result: A state where the selected options are stored.
• setResult: A callback function triggered every time an option is added or removed from the result.
• renderBadge: Custom rendering for each selected option as a badge.
• renderCheckIcon: Custom rendering for the check icon associated with each option.
• renderCreateIcon: Custom rendering for the create icon.
• placeholder: Placeholder text for the input field.
• colorScheme: Color scheme to be applied to the input.
• bgHoverColor: Background color when hovering over the options.
• allowCreation: Option to show or hide the “create new” tag option.
• notFoundText: Text to display when no options are found and allowCreation is false.
• disableRenderBadge: Optional prop to turn off the renderBadge function.

Installation

To install the Chakra UI Simple Autocomplete, you can use NPM. Run the following command in your terminal:

npm install @chakra-ui/simple-autocomplete

After installing, you can import the component into your project:

import SimpleAutocomplete from '@chakra-ui/simple-autocomplete';

Summary

The Chakra UI Simple Autocomplete is a versatile autocomplete input component built with Chakra UI. It provides a smooth user experience by allowing users to quickly search and select options. The component offers a range of customization options for rendering selected options, icons, and text. It is easy to install and integrate into a React project.