Autocomplete can have different radius factors. The default radius is sm but you can also use md, lg or full.

Autocomplete can have different sizes. Use the size prop to change the size of the autocomplete.

Autocomplete can have different contrasts. Use the contrast prop to change the contrast of the autocomplete.

Autocomplete can have different contrasts. Use the contrast prop to change the contrast of the autocomplete.

Autocomplete can have different contrasts. Use the contrast prop to change the contrast of the autocomplete.

Autocomplete can have an error state using the error prop. Use the error prop to display an error message.

Autocomplete can have a configurable icon on the left side using the icon prop. Make sure to pick meaningful icons for your use case.

Clearable autocomplete have a clear icon that appears on the right side using the clearable prop. The clear icon is also configurable using the clearIcon prop.

You can allow the user to create new items by setting the allow-create prop to true. When the user types a new value and presses Enter, a new item is created.

Autocomplete can be configured to allow multiple values and item selection using the multiple prop.

Autocomplete can be used as a country selector using the items prop. The items prop accepts an array of objects with a text and value property.

Autocomplete can be used as a country selector using the items prop. The items prop accepts an array of objects with a text and value property.

Autocomplete can have a material design style floating label using the labelFloat prop.

Autocomplete can be showed in a loading state using the loading prop.

Autocomplete can be disabled using the disabled prop.

Autocomplete can render results with icons using the <BaseAutocompleteItem> component. The component accepts an icon prop that is displayed in the results list.

Autocomplete can render results with images using the <BaseAutocompleteItem> component. The component accepts a media prop that is displayed in the results list.