Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to customize autocomplete components in Material UI?
In this article, we will learn how to customize the autocomplete components in Material UI.
Popular React UI framework Material UI provides a wide range of components with contemporary and elegant designs. Autocomplete, which offers users suggestions in real−time as they work with input fields, is one such flexible component.
Autocomplete components can be easily customized also with the help of some props that are available in the documentation of Material UI. The props like renderTags and renderInput can help customize the input autocomplete component.
The Autocomplete component not only improves the user experience but also allows for seamless customization, giving developers the ability to modify its look, behavior, and style to suit the particular needs of their application.
Autocomplete Customization Props
There are different props that are used in customizing the autocomplete component. Let’s see all of these props in detail −
renderInput − This prop is used in rendering the input. This is the mandatory prop when it comes to use the autocomplete component.
renderTags − This prop is used in rendering the Tags. It renders only the selected value that is provided to the component.
renderOption − This prop renders the option, and along with this, it uses the getOptionLabel by default.
getOptionLabel − This prop determines the string value for a given option. It's used to fill the input (and the list box options if renderOption is not provided).
If used in free solo mode, it must accept both the type of the options and a string.
filterOptions − This prop is a function used in finding the filtered options to be rendered on search.
The above props are some of the commonly used one’s but they are not limited to. There are other props also that are used in the autocomplete component.
Syntax
Below is the common syntax for customization of an autocomplete component −
<Autocomplete
multiple
renderTags={(value, getTagProps) =>
value.map((item, index) => (
<Chip
key={index}
label={item.label}
{...getTagProps({ index })}
/>
))
}
getOptionLabel={(item) => item.label}
sx={{
display: "inline-block",
}}
options={data}
renderInput={(params) => (
<div {...params}>
<input {...params} />
</div>
)}
/>
Example
The below example demonstrates a custom autocomplete component with multiple value selections in Material UI.
import React from "react";
import Autocomplete from "@mui/material/Autocomplete";
import { Chip } from "@mui/material/";
import TextField from "@mui/material/TextField";
const data = [
{ label: "Java language" },
{ label: "Python language" },
{ label: "C++ language" },
{ label: "C language" },
{ label: "Go language" },
{ label: "JavaScript language" },
{ label: "SQL" },
{ label: "MySQL" },
{ label: "HTML" },
{ label: "CSS" },
{ label: "Nextjs " },
{ label: "ReactJS " },
{ label: "VueJS " },
{ label: "Angular " },
{ label: "Angular JS " },
{ label: "PHP language" },
{ label: "R language" },
{ label: "Objective C language" },
{ label: "Cobol language" },
{ label: "Perl language" },
{ label: "Pascal language" },
{ label: "LISP language" },
{ label: "Fortran language" },
{ label: "Swift language" },
{ label: "Ruby language" },
{ label: "Algol language" },
{ label: "Scala language" },
{ label: "Rust language" },
{ label: "TypeScript language" },
{ label: "Dart language" },
{ label: "Matlab language" },
{ label: "Ada language" },
{ label: ".NET language" },
{ label: "Bash language" },
];
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}>
<h3>Select language</h3>
<Autocomplete
multiple
renderTags={(value, getTagProps) =>
value.map((item, index) => (
<Chip
key={index}
label={item.label}
{...getTagProps({ index })}
/>
))
}
getOptionLabel={(item) => item.label}
sx={{
display: "inline-block",
}}
options={data}
renderInput={(params) => (
<TextField
sx={{
width: 300,
bgcolor: "lightgreen",
fontSize: 20,
color: "black",
borderColor: "green",
}}
{...params}
/>
)}
/>
</div>
);
}
Output
Example
The below example demonstrates a custom autocomplete input component in Material UI.
In this example, we have customized the autocomplete component with the custom styles like background color, text color, font size, etc. and apart from this we have also customized the input div with the respective params.
import React from "react";
import Autocomplete from "@mui/material/Autocomplete";
const data = [
{ label: "Java language" },
{ label: "Python language" },
{ label: "C++ language" },
{ label: "C language" },
{ label: "Go language" },
{ label: "JavaScript language" },
{ label: "SQL" },
{ label: "MySQL" },
{ label: "HTML" },
{ label: "CSS" },
{ label: "Nextjs " },
{ label: "ReactJS " },
{ label: "VueJS " },
{ label: "Angular " },
{ label: "Angular JS " },
{ label: "PHP language" },
{ label: "R language" },
{ label: "Objective C language" },
{ label: "Cobol language" },
{ label: "Perl language" },
{ label: "Pascal language" },
{ label: "LISP language" },
{ label: "Fortran language" },
{ label: "Swift language" },
{ label: "Ruby language" },
{ label: "Algol language" },
{ label: "Scala language" },
{ label: "Rust language" },
{ label: "TypeScript language" },
{ label: "Dart language" },
{ label: "Matlab language" },
{ label: "Ada language" },
{ label: ".NET language" },
{ label: "Bash language" },
];
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}>
<h3>Select language</h3>
<Autocomplete
sx={{
"& input": {
width: 300,
padding: 2,
bgcolor: "lightgreen",
fontSize: 20,
color: "black",
borderRadius: 10,
}
}}
options={data}
renderInput={(params) => (
<div ref={params.InputProps.ref}>
<input {...params.inputProps} />
</div>
)}
/>
</div>
);
}
Output
Example
The below example demonstrates a hint in a custom autocomplete input component in Material UI. In this example, we have added the hint feature also, where when the user writes any input, it displays the matched results. We have used renderInput and filterOptions to achieve this.
import * as React from "react";
import { TextField } from "@mui/material/";
import { Autocomplete } from "@mui/material/";
const data = [
{ label: "Java language" },
{ label: "Python language" },
{ label: "C++ language" },
{ label: "C language" },
{ label: "Go language" },
{ label: "JavaScript language" },
{ label: "SQL" },
{ label: "MySQL" },
{ label: "HTML" },
{ label: "CSS" },
{ label: "Nextjs " },
{ label: "ReactJS " },
{ label: "VueJS " },
{ label: "Angular " },
{ label: "Angular JS " },
{ label: "PHP language" },
{ label: "R language" },
{ label: "Objective C language" },
{ label: "Cobol language" },
{ label: "Perl language" },
{ label: "Pascal language" },
{ label: "LISP language" },
{ label: "Fortran language" },
{ label: "Swift language" },
{ label: "Ruby language" },
{ label: "Algol language" },
{ label: "Scala language" },
{ label: "Rust language" },
{ label: "TypeScript language" },
{ label: "Dart language" },
{ label: "Matlab language" },
{ label: "Ada language" },
{ label: ".NET language" },
{ label: "Bash language" },
];
// main App component rendering the custom autocomplete component
export default function App() {
var getHint = React.useRef("");
const [val, setVal] = React.useState("");
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}>
<Autocomplete
onKeyDown={(event) => {
if (event.key === "Tab") {
if (getHint.current) {
setVal(getHint.current);
event.preventDefault();
}
}
}}
onBlur={() => {
getHint.current = "";
}}
disablePortal
inputValue={val}
filterOptions={(options, state) => {
const showItems = options.filter((item) =>
item.label
.toLowerCase()
.trim()
.includes(state.inputValue.toLowerCase().trim())
);
return showItems;
}}
options={data}
renderInput={(params) => {
return (
<div sx={{ position: "relative" }}>
<div>{getHint.current}</div>
<TextField
{...params}
onChange={(event) => {
const selNewVal = event.target.value;
setVal(selNewVal);
const matchItem = data.find((option) =>
option.label.startsWith(selNewVal)
);
if (selNewVal && matchItem) {
getHint.current = matchItem.label;
} else {
getHint.current = "";
}
}}
label="Select language"
/>
</div>
);
}}
sx={{ width: 400 }}
/>
</div>
);
}
Output
Conclusion
We looked at a few different ways to customize the Material UI Autocomplete component. To seamlessly adapt the Autocomplete to fit the design and functionality of your application by changing the size, styles, suggestions, and handling of selected values. The adaptability and extensive customization options of Material UI make it a potent tool for designing delightful user experiences.
Create intuitive and aesthetically pleasing Autocomplete components for our Material UI−powered applications by experimenting with various customization options and letting your creativity run wild.
88 Views
To Continue Learning Please Login