Material UI Search Bar

Theme by Teamwertarbyte

|

Updated: 24 Oct 2023

|

261 Stars

Material design search bar

Categories

Overview

The Material Search Bar is a component that can be used with Material-UI. It allows for a customizable search input field with various features.

Features

• Controlled input: The SearchBar is a controlled input, meaning that you need to keep the input state. This allows for much flexibility, such as changing and clearing the search input just by changing its props.
• Cancel on escape: The search input can be cleared when the escape key is pressed. This feature can be enabled or disabled.
• Styling customization: The styles applied to the component can be overridden or extended by providing a custom classes object.
• Customization of icons: Both the close and search icons can be overridden to match the desired design.

Installation

If you are using Material-UI v3, please install version 0.x of the search bar using the following command:

npm i --save material-ui-search-bar@beta

Summary

The Material Search Bar is a useful component for implementing a search feature in a Material-UI based application. It provides several key features, including controlled input, cancel on escape, and customization options for icons and styling. The installation is straightforward for Material-UI v3 users, and the component is licensed under the MIT license.