Why can I not use value/label data structure with Autocomplete/TagsInput?

Data structure

Autocomplete and TagsInput allow user entering any string value – the selection is not limited to predefined list of options. If you decide to use these components, your application must handle free user input.

Example of Autocomplete usage with data prop:

import { Autocomplete } from '@mantine/core';

function Demo() {
  return <Autocomplete data={['React', 'Vue']} />;
}

In this example, the user can select either React or Vue from the list of options or enter any other string value, for example, Angular.

Value/label data split

Unlike Select and MultiSelect components data in { value: string; label: string; } is not supported in Autocomplete and TagsInput. It is done on purpose to avoid confusion and make it clear that user can enter any string value.

Consider the following example:

import { Autocomplete } from '@mantine/core';

const data = [
  { value: '18361', label: 'React' },
  { value: '09411', label: 'Vue' },
];

function Demo() {
  return (
    <Autocomplete data={data} onChange={(val) => console.log(val)} />
  );
}

If Autocomplete would support { value: string; label: string; } data structure:

• When user selects React from the list, 18361 will be logged to the console
• When user selects Vue from the list, 09411 will be logged to the console
• When user enters Angular or any other value not present in the list, what should be logged to the console?
• When user enters React, should 18361 be logged to the console or should it be treated as free user input?

To avoid confusion and make it clear that user can enter any string value, Autocomplete and TagsInput do not support { value: string; label: string; } data structure.

Difference between Autocomplete and Select

If you need to limit user input to predefined list of options, consider using searchable Select instead. To learn more about the difference between Autocomplete and Select components, check out this guide.