How to hide arrows of mui autocomplete in react js?
January 08, 2023Hi Friends 👋,
Welcome To aGuideHub!
To hide arrows of mui autocomplete in React js, you can use disableClearable option. It will hide arrows of mui autocomplete in react js.
Today, I am going to show you, how to hide arrows of mui autocomplete in react js.
Installation
Install the following packages to use hide arrows of mui autocomplete in react js.
npm
npm install @mui/material @emotion/react @emotion/styledyarn
yarn add @mui/material @emotion/react @emotion/styledMUI material hide arrows of mui autocomplete example.
The below code is an example of a Material UI autocomplete hide arrows. You have to import@mui material autocomplete and By setting the disableable option to true, the user will not be able to clear the input.
App.js
import * as React from 'react';
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import Autocomplete from '@mui/material/Autocomplete';
export default function FreeSolo() {
return (
<Stack spacing={2} sx={{ width: 300 }}>
<Autocomplete
freeSolo
id="free-solo-2-demo"
disableClearable
options={top100Films.map((option) => option.title)}
renderInput={(params) => (
<TextField
{...params}
label="Search input"
InputProps={{
...params.InputProps,
type: 'search',
}}
/>
)}
/>
</Stack>
);
}
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
];In the above code example, I have used the @mui/material component and hide arrows of mui autocomplete in react js.
Check the output of the above code example.
All the best 👍
