Is it possible to emulate the Angular Material Chip input style input using a React Material UI Chip array?
I am trying to enable the clean look of Angular Material Chip input in React. The Material UI Chip array seems to be the closest thing, but it does not seem to support input natively. Is there a configuration that can be used to get this same functionality?
Based on @ryan-cogswell's comment, using Autocomplete with the freeSolo setting produced a result similar to Angular Material's Chip input.
import React from "react";
import { Chip, TextField } from "@material-ui/core";
import { Autocomplete } from "@material-ui/lab";
import "./App.css";
export const App: React.FC = () => {
return (
<div className="App">
<Autocomplete
multiple
id="tags-filled"
options={[]}
freeSolo
renderTags={(value: string[], getTagProps) =>
value.map((option: string, index: number) => (
<Chip
variant="outlined"
label={option}
{...getTagProps({ index })}
/>
))
}
renderInput={(params) => (
<TextField
{...params}
variant="filled"
label="freeSolo"
placeholder="Favorites"
/>
)}
/>
</div>
);
};
There is also a package for Material UI v5 (or MUI) called Mui chips input and it's working with React 17 and 18 !
Simply way to use.
Check the doc here : https://viclafouch.github.io/mui-chips-input/
import React from 'react'
import { MuiChipsInput } from 'mui-chips-input'
const MyComponent = () => {
const [value, setValue] = React.useState([])
const handleChange = (newValue) => {
setValue(newValue)
}
return <MuiChipsInput label="Chips" fullWidth value={value} onChange={handleChange} />
}