Select Autocomplete Difference

import { AutocompleteCity } from '@/demos/AutocompleteCity.demo'; import { SelectCountry } from '@/demos/SelectCountry.demo'; import { Layout } from '@/layout';

export const meta = { title: 'What is the difference between searchable Select and Autocomplete?', description: 'Searchable Select and Autocomplete are similar components, but they serve different purposes.', slug: 'select-autocomplete-difference', category: 'components', tags: ['select', 'autocomplete', 'searchable', 'combobox'], created_at: 'December 26, 2023', last_updated_at: 'December 26, 2023', };

export default Layout(meta);

Searchable select

Use Select component in the following cases:

• You want to restrict the user to a list of predefined options
• You want to display all available options to the user and allow searching through them
• You want to discard user input on blur if an option was not selected from the dropdown
• The value and label of the option are not the same, for example, { value: 'US', label: 'United States' }

For example, you can use Select to select a country from the list of all countries:

<Demo data={SelectCountry} />

In the example above, the user can select a country from the list of all countries, but cannot enter any other value.

Autocomplete

Use Autocomplete component in the following cases:

• You want to allow the user to enter any value
• You want to display suggestions to the user based on the input value
• You want to preserve user input on blur if an option was not selected from the dropdown
• The value and label of the option are the same, for example, 'United States'

For example, you can use Autocomplete to ask the user to enter a city:

<Demo data={AutocompleteCity} />

In the example above, suggestions are based on the input value, but the user can enter any value, and it will be preserved on blur.