In this tutorial, we will how to create search bar in react with material ui (mui 5). We will see search bar with hook, search bar with search icon, example with react material UI 5.
Install & Setup Vite + React + Typescript + MUI 5
React Material UI 5 Search Bar Example
1.react mui 5 simple search bar.
import { Container, TextField } from "@mui/material";
export default function SearchBar() {
return (
<>
<Container maxWidth="md" sx={{ mt: 20 }}>
<TextField type="search" id="search" label="Search" sx={{ width: 600 }} />
</Container>
</>
);
}
2.react mui 5 standard search bar.
import { Container, TextField } from "@mui/material";
export default function SearchBar() {
return (
<>
<Container maxWidth="md" sx={{ mt: 20 }}>
<TextField
id="standard-search"
label="Search field"
type="search"
variant="standard"
sx={{ width: 400 }}
/>
</Container>
</>
);
}
3.react mui 5 search bar onchange value with useState hooks.
import { TextField } from '@mui/material';
import { useState } from 'react';
export default function SearchBar() {
const [searchTerm, setSearchTerm] = useState('');
const handleChange = (event) => {
setSearchTerm(event.target.value);
};
return (
<TextField
id="search"
type="search"
label="Search"
value={searchTerm}
onChange={handleChange}
sx={{ width: 600 }}
/>
);
}
4. react mui 5 search bar with icons. Before using icons in search you need to install @mui/icons-material.
Install the package in your project directory with:
# with npm
npm install @mui/icons-material
# with yarn
yarn add @mui/icons-material
react mui 5 search bar with search icon.
import { Container, InputAdornment, TextField } from "@mui/material";
import { useState } from "react";
import SearchIcon from "@mui/icons-material/Search";
export default function SearchBar() {
const [searchTerm, setSearchTerm] = useState("");
const handleChange = (event) => {
setSearchTerm(event.target.value);
};
return (
<Container maxWidth="md" sx={{ mt: 20 }}>
<TextField
id="search"
type="search"
label="Search"
value={searchTerm}
onChange={handleChange}
sx={{ width: 600 }}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<SearchIcon />
</InputAdornment>
),
}}
/>
</Container>
);
}