How to make mui textfield with chips in react js?
November 27, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
To make mui textfield with chips, use autocomplete with render tags attribute and pass your chip component in render tags attribute. It will make mui textfield with chips.
Today, I am going to show you, how to make mui textfield with chips in react js.
Installation
Install the following packages to use mui textfield in react js.
npm
npm install @mui/material @emotion/react @emotion/styledyarn
yarn add @mui/material @emotion/react @emotion/styledMUI material textfield with chips example.
The below code is an example of making with chips using mui textfield.
App.js
import React from "react";
import Chip from '@mui/material/Chip';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import "./App.css";
export default function App() {
return (
<div className="App">
<Autocomplete
multiple
id="tags-filled"
options={[]}
freeSolo
renderTags={(value, getTagProps) =>
value.map((option, index) => (
<Chip
variant="outlined"
label={option}
{...getTagProps({ index })}
/>
))
}
renderInput={(params) => (
<TextField
{...params}
variant="filled"
label="freeSolo"
placeholder="Favorites"
/>
)}
/>
</div>
);
};In the above code example, I have used the @mui/material TextField component and made mui with chips of MUI Textfield.
Check the output of the above code example.
All the best 👍