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.

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.

Fedeorlandau

Chakra UI Simple Autocomplete

Contentful Svelte Tailwind