In this tutorial, we will see lists component in react with material ui (mui 5). We will see mui 5 lists with checkbox, lists with icon example with react material UI 5.
Install & Setup Vite + React + Typescript + MUI 5
To use material ui icons 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 Material UI 5 Lists Example
1. Create react mui 5 simple list with icon using react-mui List, ListItem, ListItemButton, ListItemText component.
import * as React from "react";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Divider from "@mui/material/Divider";
import InboxIcon from "@mui/icons-material/Inbox";
import DraftsIcon from "@mui/icons-material/Drafts";
import { Box, Container } from "@mui/material";
export default function BasicList() {
return (
<Container maxWidth="md" sx={{ mt: 8 }}>
<Box sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper", boxShadow: 1 }}>
<nav aria-label="main mailbox folders">
<List>
<ListItem disablePadding>
<ListItemButton>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary="Inbox" />
</ListItemButton>
</ListItem>
<ListItem disablePadding>
<ListItemButton>
<ListItemIcon>
<DraftsIcon />
</ListItemIcon>
<ListItemText primary="Drafts" />
</ListItemButton>
</ListItem>
</List>
</nav>
<Divider />
<nav aria-label="secondary mailbox folders">
<List>
<ListItem disablePadding>
<ListItemButton>
<ListItemText primary="Trash" />
</ListItemButton>
</ListItem>
<ListItem disablePadding>
<ListItemButton component="a" href="#simple-list">
<ListItemText primary="Spam" />
</ListItemButton>
</ListItem>
</List>
</nav>
</Box>
</Container>
);
}
2. react mui 5 nested list items with icons.
import * as React from "react";
import ListSubheader from "@mui/material/ListSubheader";
import List from "@mui/material/List";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Collapse from "@mui/material/Collapse";
import InboxIcon from "@mui/icons-material/MoveToInbox";
import DraftsIcon from "@mui/icons-material/Drafts";
import SendIcon from "@mui/icons-material/Send";
import ExpandLess from "@mui/icons-material/ExpandLess";
import ExpandMore from "@mui/icons-material/ExpandMore";
import StarBorder from "@mui/icons-material/StarBorder";
import { Container } from "@mui/material";
export default function NestedList() {
const [open, setOpen] = React.useState(true);
const handleClick = () => {
setOpen(!open);
};
return (
<Container maxWidth="md" sx={{ mt: 8 }}>
<List
sx={{
width: "100%",
maxWidth: 360,
bgcolor: "background.paper",
boxShadow: 1,
}}
component="nav"
aria-labelledby="nested-list-subheader"
subheader={
<ListSubheader component="div" id="nested-list-subheader">
Nested List Items
</ListSubheader>
}
>
<ListItemButton>
<ListItemIcon>
<SendIcon />
</ListItemIcon>
<ListItemText primary="Sent mail" />
</ListItemButton>
<ListItemButton>
<ListItemIcon>
<DraftsIcon />
</ListItemIcon>
<ListItemText primary="Drafts" />
</ListItemButton>
<ListItemButton onClick={handleClick}>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary="Inbox" />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
<Collapse in={open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItemButton sx={{ pl: 4 }}>
<ListItemIcon>
<StarBorder />
</ListItemIcon>
<ListItemText primary="Starred" />
</ListItemButton>
</List>
</Collapse>
</List>
</Container>
);
}
3. react mui 5 folder list with icons.
import * as React from "react";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";
import ListItemAvatar from "@mui/material/ListItemAvatar";
import Avatar from "@mui/material/Avatar";
import ImageIcon from "@mui/icons-material/Image";
import WorkIcon from "@mui/icons-material/Work";
import BeachAccessIcon from "@mui/icons-material/BeachAccess";
import { Container } from "@mui/material";
export default function FolderList() {
return (
<Container maxWidth="md" sx={{ mt: 8 }}>
<List
sx={{
width: "100%",
maxWidth: 360,
bgcolor: "background.paper",
boxShadow: 1,
}}
>
<ListItem>
<ListItemAvatar>
<Avatar>
<ImageIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary="Photos" secondary="Jan 9, 2014" />
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>
<WorkIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary="Work" secondary="Jan 7, 2014" />
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>
<BeachAccessIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary="Vacation" secondary="July 20, 2014" />
</ListItem>
</List>
</Container>
);
}
4. react mui 5 list only, list icon with text, list avatar with text & icon.
import * as React from "react";
import { styled } from "@mui/material/styles";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemAvatar from "@mui/material/ListItemAvatar";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Avatar from "@mui/material/Avatar";
import IconButton from "@mui/material/IconButton";
import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import FolderIcon from "@mui/icons-material/Folder";
import DeleteIcon from "@mui/icons-material/Delete";
import { Box, Container } from "@mui/material";
function generate(element: React.ReactElement) {
return [0, 1, 2].map((value) =>
React.cloneElement(element, {
key: value,
})
);
}
const Demo = styled("div")(({ theme }) => ({
backgroundColor: theme.palette.background.paper,
}));
export default function InteractiveList() {
const [dense, setDense] = React.useState(false);
const [secondary, setSecondary] = React.useState(false);
return (
<Container maxWidth="md" sx={{ mt: 8 }}>
<Box sx={{ flexGrow: 1, maxWidth: 752 }}>
<FormGroup row>
<FormControlLabel
control={
<Checkbox
checked={dense}
onChange={(event) => setDense(event.target.checked)}
/>
}
label="Enable dense"
/>
<FormControlLabel
control={
<Checkbox
checked={secondary}
onChange={(event) => setSecondary(event.target.checked)}
/>
}
label="Enable secondary text"
/>
</FormGroup>
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Typography sx={{ mt: 4, mb: 2 }} variant="h6" component="div">
Text only
</Typography>
<Demo>
<List dense={dense}>
{generate(
<ListItem>
<ListItemText
primary="Single-line item"
secondary={secondary ? "Secondary text" : null}
/>
</ListItem>
)}
</List>
</Demo>
</Grid>
<Grid item xs={12} md={6}>
<Typography sx={{ mt: 4, mb: 2 }} variant="h6" component="div">
Icon with text
</Typography>
<Demo>
<List dense={dense}>
{generate(
<ListItem>
<ListItemIcon>
<FolderIcon />
</ListItemIcon>
<ListItemText
primary="Single-line item"
secondary={secondary ? "Secondary text" : null}
/>
</ListItem>
)}
</List>
</Demo>
</Grid>
</Grid>
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Typography sx={{ mt: 4, mb: 2 }} variant="h6" component="div">
Avatar with text
</Typography>
<Demo>
<List dense={dense}>
{generate(
<ListItem>
<ListItemAvatar>
<Avatar>
<FolderIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Single-line item"
secondary={secondary ? "Secondary text" : null}
/>
</ListItem>
)}
</List>
</Demo>
</Grid>
<Grid item xs={12} md={6}>
<Typography sx={{ mt: 4, mb: 2 }} variant="h6" component="div">
Avatar with text and icon
</Typography>
<Demo>
<List dense={dense}>
{generate(
<ListItem
secondaryAction={
<IconButton edge="end" aria-label="delete">
<DeleteIcon />
</IconButton>
}
>
<ListItemAvatar>
<Avatar>
<FolderIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Single-line item"
secondary={secondary ? "Secondary text" : null}
/>
</ListItem>
)}
</List>
</Demo>
</Grid>
</Grid>
</Box>
</Container>
);
}
5. react mui 5 list with selected list item.
import * as React from "react";
import List from "@mui/material/List";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Divider from "@mui/material/Divider";
import InboxIcon from "@mui/icons-material/Inbox";
import DraftsIcon from "@mui/icons-material/Drafts";
import { Box, Container } from "@mui/material";
export default function SelectedListItem() {
const [selectedIndex, setSelectedIndex] = React.useState(1);
const handleListItemClick = (
event: React.MouseEvent<HTMLDivElement, MouseEvent>,
index: number
) => {
setSelectedIndex(index);
};
return (
<Container maxWidth="md" sx={{ mt: 8 }}>
<Box
sx={{
width: "100%",
maxWidth: 360,
bgcolor: "background.paper",
boxShadow: 1,
}}
>
<List component="nav" aria-label="main mailbox folders">
<ListItemButton
selected={selectedIndex === 0}
onClick={(event) => handleListItemClick(event, 0)}
>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary="Inbox" />
</ListItemButton>
<ListItemButton
selected={selectedIndex === 1}
onClick={(event) => handleListItemClick(event, 1)}
>
<ListItemIcon>
<DraftsIcon />
</ListItemIcon>
<ListItemText primary="Drafts" />
</ListItemButton>
</List>
<Divider />
<List component="nav" aria-label="secondary mailbox folder">
<ListItemButton
selected={selectedIndex === 2}
onClick={(event) => handleListItemClick(event, 2)}
>
<ListItemText primary="Trash" />
</ListItemButton>
<ListItemButton
selected={selectedIndex === 3}
onClick={(event) => handleListItemClick(event, 3)}
>
<ListItemText primary="Spam" />
</ListItemButton>
</List>
</Box>
</Container>
);
}
6. react mui 5 avatar list with align list items.
import * as React from "react";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import Divider from "@mui/material/Divider";
import ListItemText from "@mui/material/ListItemText";
import ListItemAvatar from "@mui/material/ListItemAvatar";
import Avatar from "@mui/material/Avatar";
import Typography from "@mui/material/Typography";
import { Container } from "@mui/material";
export default function AlignItemsList() {
return (
<Container maxWidth="md" sx={{ mt: 8 }}>
<List
sx={{
width: "100%",
maxWidth: 360,
bgcolor: "background.paper",
boxShadow: 1,
}}
>
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar
alt="Remy Sharp"
src="https://mui.com/static/images/avatar/1.jpg"
/>
</ListItemAvatar>
<ListItemText
primary="Brunch this weekend?"
secondary={
<React.Fragment>
<Typography
sx={{ display: "inline" }}
component="span"
variant="body2"
color="text.primary"
>
Ali Connors
</Typography>
{" — I'll be in your neighborhood doing errands this…"}
</React.Fragment>
}
/>
</ListItem>
<Divider variant="inset" component="li" />
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar
alt="Travis Howard"
src="https://mui.com/static/images/avatar/2.jpg"
/>
</ListItemAvatar>
<ListItemText
primary="Summer BBQ"
secondary={
<React.Fragment>
<Typography
sx={{ display: "inline" }}
component="span"
variant="body2"
color="text.primary"
>
to Scott, Alex, Jennifer
</Typography>
{" — Wish I could come, but I'm out of town this…"}
</React.Fragment>
}
/>
</ListItem>
<Divider variant="inset" component="li" />
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar
alt="Cindy Baker"
src="https://mui.com/static/images/avatar/3.jpg"
/>
</ListItemAvatar>
<ListItemText
primary="Oui Oui"
secondary={
<React.Fragment>
<Typography
sx={{ display: "inline" }}
component="span"
variant="body2"
color="text.primary"
>
Sandra Adams
</Typography>
{" — Do you have Paris recommendations? Have you ever…"}
</React.Fragment>
}
/>
</ListItem>
</List>
</Container>
);
}
7. react mui 5 list with checkbox.
import * as React from "react";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Checkbox from "@mui/material/Checkbox";
import IconButton from "@mui/material/IconButton";
import CommentIcon from "@mui/icons-material/Comment";
import { Container } from "@mui/material";
export default function CheckboxList() {
const [checked, setChecked] = React.useState([0]);
const handleToggle = (value: number) => () => {
const currentIndex = checked.indexOf(value);
const newChecked = [...checked];
if (currentIndex === -1) {
newChecked.push(value);
} else {
newChecked.splice(currentIndex, 1);
}
setChecked(newChecked);
};
return (
<Container maxWidth="md" sx={{ mt: 8 }}>
<List
sx={{
width: "100%",
maxWidth: 360,
bgcolor: "background.paper",
boxShadow: 1,
}}
>
{[0, 1, 2, 3].map((value) => {
const labelId = `checkbox-list-label-${value}`;
return (
<ListItem
key={value}
secondaryAction={
<IconButton edge="end" aria-label="comments">
<CommentIcon />
</IconButton>
}
disablePadding
>
<ListItemButton
role={undefined}
onClick={handleToggle(value)}
dense
>
<ListItemIcon>
<Checkbox
edge="start"
checked={checked.indexOf(value) !== -1}
tabIndex={-1}
disableRipple
inputProps={{ "aria-labelledby": labelId }}
/>
</ListItemIcon>
<ListItemText id={labelId} primary={`Line item ${value + 1}`} />
</ListItemButton>
</ListItem>
);
})}
</List>
</Container>
);
}
Related Posts
create a chat ui in react with mui 5
create a blog section in react mui 5
create a footer in react mui 5
create a responsive navbar in react with mui 5
react mui 5 search bar example
react mui 5 login page example
react mui 5 image list example
react mui 5 toggle switch example
react mui 5 registration form example
react mui 5 contact us page example
react mui 5 loading skeleton example
react mui 5 gradient button example
react mui 5 social media icons example
react mui 5 snackbar toast notification example
how to use autocomplete react mui 5
dynamically multiple input fields in react mui 5
how to use dropdown menu in react mui 5
how to use background image in react mui 5
how to use pricing table in react mui 5
how to use dark mode in react mui 5
how to use file upload in react mui 5
how to use sticky navbar in react mui 5
how to use box shadow in react mui 5
how to use multi step form in react mui 5
how to use loading button in react mui 5