CODEWITHSUNDEEP
reactjsautocompletematerial-ui
Rahul SK
Rahul SK

Reputation: 432

material-ui Autocomplete accept custom values

I have this autocomplete drop down box.

If I select values other than in the drop down, how do i accept the autocomplete drop down box to take in the custom value. In this example, bar and bat values are in drop down.

How do i accept bag to be accepted as input value?

my code is at : https://codesandbox.io/s/material-demo-8scos

export default function ComboBox() {
    return (
    <Autocomplete
        id="combo-box-demo"
       options={top100Films}
       getOptionLabel={option => option.title}
       style={{ width: 300 }}
       renderInput={params => (
           <TextField {...params} label="Combo box" variant="outlined" />
       )}
    />
  );
}

const top100Films = [
  { title: "bar", year: 1994 },
  { title: "bat", year: 1972 }
];

https://codesandbox.io/s/material-demo-ytrt4

Upvotes: 4

Views: 2761

Answers (1)

Alex Bran
Alex Bran

Reputation: 463

https://mui.com/material-ui/react-autocomplete/

Just add freeSolo after the Autocomplete.

Upvotes: 2

Related Questions