[AutoComplete] Different label and value

[callmeaf]

Steps to reproduce

Steps:

1. Open this link to live example: (required) https://codesandbox.io/p/sandbox/reverent-cori-sk85rc?file=%2Fsrc%2FDemo.js%3A17%2C51

Current behavior

load countries data and get label of country to display in TextField and set it as TextField value

Expected behavior

I need to get country code instead label of it
Example:
when i select "Australia" country, i want when submit form, get code of country "AU"

Context

I understand TextField act like input html and input html only display the value of it
for fixe this issue can use <input type="hidden" name="country" value="AU" />
but i only open this issue if mui handle this situation, i use easy way instead hard way

Your environment

{
"dependencies": {
"@emotion/react": "latest",
"@emotion/styled": "latest",
"@mui/material": "latest",
"react": "latest",
"react-dom": "latest"
},
"description": "https://github.com/mui/material-ui/blob/v6.4.1/docs/data/material/components/autocomplete/CountrySelect.js",
"devDependencies": {
"react-scripts": "latest"
},
"scripts": {
"build": "react-scripts build",
"eject": "react-scripts eject",
"start": "react-scripts start",
"test": "react-scripts test"
}
}

Search keywords: MUI AutoComplete,Different Label And Value

[aarongarciah]

@callmeaf one way of achieving this is by controlling the Autocomplete component (using the value and onChange props as explained in the docs) and using the country object as the value. Here's an example: https://codesandbox.io/p/sandbox/reverent-cori-sk85rc

Another option, probably simpler depending on your use case, is to just find the country by name from the list (assuming all names are unique). Here's an example: https://codesandbox.io/p/sandbox/festive-worker-zfhmyq

Some existing issues already cover the problems of not being able to have different formats between options and values: #23708 and #31192

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@callmeaf How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.