Why does the auto-complete component show the value of the option selected rather than the label?

[ghost]

With this simple setup:

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
]
function Foo() {
  return <AutoComplete options={options} />
}

I would expect selecting Chocolate to show Chocolate as the selection, however the value of the AutoComplete component is only the value key of the option that was selected so it shows chocolate. I am wondering what the reasoning for this is? It would also be nice to be able to access both the label and the value of the selected option for times when the user doesn't need to know what the value is, just the label.

[unix]

The tags are for display purposes only, so if you want them to be the same or different, you can do both.

The usual scenario is that the developer is dealing with key-value pairs, from persistent storage or elsewhere, the user's label is just a relational mapping. If you want to display the user's selected label, you can maintain your own relational mapping.

[unix]

I'm not quite sure what you mean by your question, so maybe I can help you better if you can be more detailed or typeset.

[ghost]

This could be where I am misunderstanding the usage of the auto-complete component, but to me, the label would be the user friendly text hence why it is show in the dropdown and the value would be some data that the user wouldn't necessarily need to know about.
For example if this is a possible option {label: 'Some Team I belong to', value: 'teamuid'} the auto-complete component will show Some Team I belong to in the dropdown however when the user selects it teamuid will be what is shown as the active selection in the input field.
I am just wondering why this is this case and if there is any consideration in showing the label in the input field?

[unix]

The current label only provides a display for the dropdown box.
However, your point is a good one, the label should be an optional value, forcing options to include the label attribute does not make much sense. In fact, there is no dependency on label in the design of component either, just a decorative character.

---

I think setting label as optional is a good solution and would like to hear more ideas.