Breaking News: Grepper is joining You.com. Read the official announcement!

material ui textfield with chips

Mystic Dev answered on November 3, 2021 Popularity 10/10 Helpfulness 3/10

answer material ui textfield with chips

material ui textfield with chips

Comment

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>
  );
};

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: chips javascript material-ui textfield

Link to this answer
Share Copy Link