React MUI Transfer List Input

Last Updated : 26 Apr, 2025

React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.

In this article, we'll be discussing React MUI Transfer List Input. A Transfer List or a shuttle that allows the user to move one or more list items between lists.

React MUI Checkbox Props:

checked: It determines whether the component is checked.
checkedIcon: It denotes the icon to display when the component is checked.
classes: It denotes the styles to override the default ones.
color: It denotes the color of the component.
defaultChecked: It determines whether the component is checked by default.
disabled: It determines whether the component is disabled.
disableRipple: It determines whether the ripple effect is disabled on the component.
icon: It denotes the icon to display when the component is unchecked.
id: It denotes the id of the input element.
indeterminate: It determines whether the component is in an indeterminate state.
indeterminateIcon: It denotes the icon to display when the component is in an indeterminate state.
inputProps: It denotes the list of attributes applied to the input element.
inputRef: It denotes a ref that is passed to the input element.
onChange: It denotes a callback function that is triggered when the state of the checkbox is changed.
required: It determines whether the input element is required.
size: It denotes the size of the component.
sx: It denotes a system prop that allows defining system overrides as well as additional CSS styles.
value: It denotes the value of the component.

React MUI List Props:

children: It is used to set the content of the component.
classes: This overrides the existing styles or adds new styles to the component.
component: This is used to access the root node.
dense: If set to true, the content padding is reduced and the children appear closer. The default value is false.
disablePadding: If set to true, vertical padding is removed from the list. The default value is false.
subheader: The subheader’s content, which is often ListSubheader.
sx: The system prop allows defining system overrides as well as additional CSS styles.

React MUI ListItem Props:

classes: This overrides the existing styles or adds new styles to the component.
alignItems: It states the align-items style property. The default value is the center.
autoFocus: If set to true, the list item is focused during the first mount.
children: The content of the component.
component: It is the component used for the root node.
components: It is the components used for each slot inside the InputBase.
componentsProps: It is the props used for each slot inside the Input.
dense: If set to true, compact vertical padding designed for keyboard and mouse input is used.
disabled: If set to true, the component is disabled. The default value is set to false.
disableGutters: If set to true, the left and right padding are removed.
disablePadding: If set to true, all the paddings are removed.
divider: If set to true, a 1px light border is added to the bottom of the list item.
secondaryAction: It is the element to be displayed at the end of the list.
selected: If set to true, applies selected styling.
sx: The system prop allows defining system overrides as well as additional CSS sty less.
button: If true, the list item is a button. Props intended for ButtonBase can then be applied to ListItem.

React MUI Button Props:

children: It is used to set the content of the button.
classes: It is to override or extend the styles applied to the component.
size: It is used to customize the size of the button.
disableElevation: It is the boolean value to determine the elevation for the button.
fullWidth: It is the boolean value that determines whether it covers the entire width of the container or not.
disabled: It is the Boolean value to enable or disable the button.
disableElevation: It is the boolean value to enable or disable the button’s elevated appearance.
disableFocusRipple: It is the boolean value to enable or disable the keyboard focus ripple effect.
startIcon: Element before the children.
endIcon: Element after the children.
href: Its URL to link to when the button is clicked.
color: It is the color of the component.
disableRipple: It is the boolean value to disable or enable the ripple effect.

Creating React Project:

Step 1: To create a react app, you need to install react modules through npm command.

npm create-react-app project name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project name

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material @emotion/react @emotion/styled

Project Structure:

Step to Run Application:

npm start

Example 1: Below example demonstrates the React MUI Transfer List Input.

JavaScript

import React from "react";
import Grid from "@mui/material/Grid";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Checkbox from "@mui/material/Checkbox";
import Button from "@mui/material/Button";
import Paper from "@mui/material/Paper";

function not(a, b) {
    return a.filter((value) => b.indexOf(value) === -1);
}

function intersection(a, b) {
    return a.filter((value) => b.indexOf(value) !== -1);
}
function App() {
    const [checked, setChecked] = React.useState([]);
    const [left, setLeft] = React.useState([0, 1, 2]);
    const [right, setRight] = React.useState([3, 4, 5]);

    const leftChecked = intersection(checked, left);
    const rightChecked = intersection(checked, right);

    const handleToggle = (value) => () => {
        const currentIndex = checked.indexOf(value);
        const newChecked = [...checked];

        if (currentIndex === -1) {
            newChecked.push(value);
        } else {
            newChecked.splice(currentIndex, 1);
        }

        setChecked(newChecked);
    };

    const handleAllRight = () => {
        setRight(right.concat(left));
        setLeft([]);
    };

    const handleCheckedRight = () => {
        setRight(right.concat(leftChecked));
        setLeft(not(left, leftChecked));
        setChecked(not(checked, leftChecked));
    };

    const handleCheckedLeft = () => {
        setLeft(left.concat(rightChecked));
        setRight(not(right, rightChecked));
        setChecked(not(checked, rightChecked));
    };

    const handleAllLeft = () => {
        setLeft(left.concat(right));
        setRight([]);
    };

    const customList = (items) => (
        <Paper sx={{ width: 200, height: 180, overflow: "auto" }}>
            <List dense component="div" role="list">
                {items.map((value) => {
                    const labelId = `transfer-list-item-${value}-label`;

                    return (
                        <ListItem
                            key={value}
                            role="listitem"
                            button
                            onClick={handleToggle(value)}
                        >
                            <ListItemIcon>
                                <Checkbox
                                    checked={checked.indexOf(value) 
                                        !== -1}
                                    tabIndex={-1}
                                    disableRipple
                                    color="success"
                                    inputProps={{
                                        "aria-labelledby": labelId,
                                    }}
                                />
                            </ListItemIcon>
                            <ListItemText id={labelId} primary=
                                {`Item ${value + 1}`} />
                        </ListItem>
                    );
                })}
                <ListItem />
            </List>
        </Paper>
    );

    return (
        <div>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Transfer List Input</h2>
            </div>
            <div style={{ textAlign: "center" }}>
                <Grid container spacing={2} 
                    justifyContent="center" alignItems="center">
                    <Grid item>{customList(left)}</Grid>
                    <Grid item>
                        <Grid container direction="column"
                            alignItems="center">
                            <Button
                                sx={{ my: 0.5 }}
                                variant="contained"
                                color="success"
                                size="medium"
                                onClick={handleAllRight}
                                disabled={left.length === 0}
                                aria-label="move all right"
                            >
                                ≫
                            </Button>
                            <Button
                                sx={{ my: 0.5 }}
                                variant="outlined"
                                color="success"
                                size="medium"
                                onClick={handleCheckedRight}
                                disabled={leftChecked.length === 0}
                                aria-label="move selected right"
                            >
                                >
                            </Button>
                            <Button
                                sx={{ my: 0.5 }}
                                variant="outlined"
                                color="success"
                                size="medium"
                                onClick={handleCheckedLeft}
                                disabled={rightChecked.length === 0}
                                aria-label="move selected left"
                            >
                                <
                            </Button>
                            <Button
                                sx={{ my: 0.5 }}
                                variant="contained"
                                color="success"
                                size="medium"
                                onClick={handleAllLeft}
                                disabled={right.length === 0}
                                aria-label="move all left"
                            >
                                ≪
                            </Button>
                        </Grid>
                    </Grid>
                    <Grid item>{customList(right)}</Grid>
                </Grid>
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the React MUI Transfer List Input and displays the number of choices selected.

JavaScript

import React from "react";
import Grid from '@mui/material/Grid';
import List from '@mui/material/List';
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemIcon from '@mui/material/ListItemIcon';
import Checkbox from '@mui/material/Checkbox';
import Button from '@mui/material/Button';
import Divider from '@mui/material/Divider';

function not(a, b) {
    return a.filter((value) => b.indexOf(value) === -1);
}

function intersection(a, b) {
    return a.filter((value) => b.indexOf(value) !== -1);
}

function union(a, b) {
    return [...a, ...not(b, a)];
}


function App() {
    const [checked, setChecked] = React.useState([]);
    const [left, setLeft] = React.useState([0, 1, 2]);
    const [right, setRight] = React.useState([3, 4, 5]);

    const leftChecked = intersection(checked, left);
    const rightChecked = intersection(checked, right);

    const handleToggle = (value) => () => {
        const currentIndex = checked.indexOf(value);
        const newChecked = [...checked];

        if (currentIndex === -1) {
            newChecked.push(value);
        } else {
            newChecked.splice(currentIndex, 1);
        }

        setChecked(newChecked);
    };

    const numberOfChecked = (items) => 
        intersection(checked, items).length;

    const handleToggleAll = (items) => () => {
        if (numberOfChecked(items) === items.length) {
            setChecked(not(checked, items));
        } else {
            setChecked(union(checked, items));
        }
    };


    const handleCheckedRight = () => {
        setRight(right.concat(leftChecked));
        setLeft(not(left, leftChecked));
        setChecked(not(checked, leftChecked));
    };

    const handleCheckedLeft = () => {
        setLeft(left.concat(rightChecked));
        setRight(not(right, rightChecked));
        setChecked(not(checked, rightChecked));
    };


    const customList = (title, items) => (
        <Card>
            <CardHeader
                sx={{ px: 2, py: 1 }}
                avatar={
                    <Checkbox
                        onClick={handleToggleAll(items)}
                        checked={numberOfChecked(items) === 
                            items.length && items.length !== 0}
                        indeterminate={
                            numberOfChecked(items) !== 
                                items.length && numberOfChecked(items) !== 0
                        }
                        disabled={items.length === 0}
                        inputProps={{
                            'aria-label': 'all items selected',
                        }}
                        color="success"
                    />
                }
                title={title}
                subheader={`${numberOfChecked(items)}/${items.length} 
                    selected`}
            />
            <Divider />
            <List
                sx={{
                    width: 200,
                    height: 230,
                    bgcolor: 'background.paper',
                    overflow: 'auto',
                }}
                dense
                component="div"
                role="list"
            >
                {items.map((value) => {
                    const labelId = 
                        `transfer-list-all-item-${value}-label`;

                    return (
                        <ListItem
                            key={value}
                            role="listitem"
                            button
                            onClick={handleToggle(value)}
                        >
                            <ListItemIcon>
                                <Checkbox
                                    checked={checked.indexOf(value) 
                                        !== -1}
                                    tabIndex={-1}
                                    color="success"
                                    disableRipple
                                    inputProps={{
                                        'aria-labelledby': labelId,
                                    }}
                                />
                            </ListItemIcon>
                            <ListItemText id={labelId} 
                                primary={`Item ${value + 1}`} />
                        </ListItem>
                    );
                })}
                <ListItem />
            </List>
        </Card>
    );

    return (
        <div>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Transfer List Input</h2>
            </div>
            <div style={{ textAlign: "center" }}>
                <Grid container spacing={2} justifyContent="center" 
                    alignItems="center">
                    <Grid item>{customList('Choices', left)}</Grid>
                    <Grid item>
                        <Grid container direction="column" 
                            alignItems="center">
                            <Button
                                sx={{ my: 0.5 }}
                                variant="contained"
                                size="medium"
                                color="success"
                                onClick={handleCheckedRight}
                                disabled={leftChecked.length === 0}
                                aria-label="move selected right"
                            >
                                >
                            </Button>
                            <Button
                                sx={{ my: 0.5 }}
                                variant="contained"
                                color="success"
                                size="medium"
                                onClick={handleCheckedLeft}
                                disabled={rightChecked.length === 0}
                                aria-label="move selected left"
                            >
                                <
                            </Button>
                        </Grid>
                    </Grid>
                    <Grid item>{customList('Chosen', right)}</Grid>
                </Grid>
            </div>
        </div>
    );
}

export default App;