Material UI Chip Input
|Updated:
23 Dec 2022
|735 Stars
A chip input field using Material-UI.
Categories
Overview:
This project provides a chip input field for Material-UI. It is inspired by Angular Material’s chip input. It supports both MUI v4 and MUI v5, and there is a live demo available on the storybook.
Features:
- Support for MUI v4 and MUI v5
- Allows duplicate chips if specified
- Can always show the placeholder
- Provides options for behavior when the input is blurred
- Customizable chip renderer to customize chip styles
- Ability to clear input value when the value prop is changed
- Auto complete with data source array
- Configurable data source for objects list
- Predefined chips for uncontrolled mode
- Delay before adding chips
- Option to disable the chip input
- Ability to disable the underline for the input
- Props for customizing the FormHelperText component
- Option to make the chip input fill the available width
Installation:
To install the chip input field for Material-UI, follow these steps:
- Make sure you have Material-UI 1.0.0 or later installed.
- Run the following command to install the chip input package:
npm install chip-input-material-ui
- Import the chip input component in your project.
- You can now use the chip input component in your application.
Summary:
The chip input field for Material-UI provides a convenient way to handle inputs using chips. It supports both MUI v4 and MUI v5 and offers various customization options. With its support for auto complete and configurable data source, it provides a seamless user experience. The installation process is straightforward, making it easy to integrate into your project.
