More Premium Hugo Themes Premium React Themes

Material UI Chip Input

A chip input field using Material-UI.

Material UI Chip Input

A chip input field using Material-UI.

Author Avatar Theme by teamwertarbyte
Github Stars Github Stars: 735
Last Commit Last Commit: Dec 23, 2022 -
First Commit Created: Jan 15, 2024 -
default image

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:

  1. Make sure you have Material-UI 1.0.0 or later installed.
  2. Run the following command to install the chip input package:
npm install chip-input-material-ui
  1. Import the chip input component in your project.
  2. 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.