Material UI: Forms, Data Display & Layout

Form Components

import TextField from '@mui/material/TextField'
import Select from '@mui/material/Select'
import MenuItem from '@mui/material/MenuItem'
import FormControl from '@mui/material/FormControl'
import InputLabel from '@mui/material/InputLabel'
import FormHelperText from '@mui/material/FormHelperText'
import Checkbox from '@mui/material/Checkbox'
import FormControlLabel from '@mui/material/FormControlLabel'
import Switch from '@mui/material/Switch'
import Autocomplete from '@mui/material/Autocomplete'
import Slider from '@mui/material/Slider'

// TextField (most versatile input)
<TextField
  label="Email"
  type="email"
  variant="outlined"   // outlined | filled | standard
  error={!!errors.email}
  helperText={errors.email?.message}
  fullWidth
  required
  {...register('email')}
/>

// Select
<FormControl fullWidth>
  <InputLabel>Role</InputLabel>
  <Select value={role} label="Role" onChange={e => setRole(e.target.value)}>
    <MenuItem value="admin">Admin</MenuItem>
    <MenuItem value="user">User</MenuItem>
  </Select>
  <FormHelperText>Select user role</FormHelperText>
</FormControl>

// Autocomplete (combobox with search)
<Autocomplete
  options={countries}
  getOptionLabel={o => o.name}
  renderInput={params => <TextField {...params} label="Country" />}
  onChange={(_, value) => setCountry(value)}
  multiple   // allow multiple selections
/>

Data Display

import Table from '@mui/material/Table'
import TableBody from '@mui/material/TableBody'
import TableCell from '@mui/material/TableCell'
import TableHead from '@mui/material/TableHead'
import TableRow from '@mui/material/TableRow'
import TablePagination from '@mui/material/TablePagination'
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 Alert from '@mui/material/Alert'
import Skeleton from '@mui/material/Skeleton'

// Table with pagination
<Table>
  <TableHead>
    <TableRow>
      <TableCell>Name</TableCell>
      <TableCell align="right">Actions</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    {rows.map(row => (
      <TableRow key={row.id} hover>
        <TableCell>{row.name}</TableCell>
        <TableCell align="right">
          <IconButton size="small"><EditIcon /></IconButton>
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>
<TablePagination
  count={total}
  page={page}
  rowsPerPage={25}
  onPageChange={(_, p) => setPage(p)}
/>

// Alert / Snackbar
<Alert severity="error" onClose={handleClose}>Something went wrong</Alert>
<Alert severity="success" variant="filled">Changes saved!</Alert>

// Loading skeleton
<Skeleton variant="text" width={200} />
<Skeleton variant="rectangular" height={120} />

Layout Components

import Grid from '@mui/material/Grid'
import Container from '@mui/material/Container'
import Drawer from '@mui/material/Drawer'
import AppBar from '@mui/material/AppBar'
import Toolbar from '@mui/material/Toolbar'
import Divider from '@mui/material/Divider'

// Responsive grid (Grid v2 — MUI v5.9+)
<Grid container spacing={2}>
  <Grid item xs={12} md={6} lg={4}>
    <Paper sx={{ p: 2 }}>Card 1</Paper>
  </Grid>
  <Grid item xs={12} md={6} lg={4}>
    <Paper sx={{ p: 2 }}>Card 2</Paper>
  </Grid>
</Grid>

// Container (max-width + center)
<Container maxWidth="lg">
  <Typography variant="h4">Page Title</Typography>
</Container>

// Sidebar Drawer
<Drawer open={open} onClose={() => setOpen(false)} anchor="left">
  <Box sx={{ width: 240 }} role="presentation">
    <List>...</List>
  </Box>
</Drawer>