005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
1.2 KiB
1.2 KiB
productId, title, components, githubLabel
| productId | title | components | githubLabel |
|---|---|---|---|
| material-ui | Transfer list React component | List, ListItem, Checkbox, Switch | scope: transfer list |
Transfer List
A Transfer List (or "shuttle") enables the user to move one or more list items between lists.
{{"component": "@mui/docs/ComponentLinkHeader"}}
Basic transfer list
For completeness, this example includes buttons for "move all", but not every transfer list needs these.
{{"demo": "TransferList.js", "bg": true}}
Enhanced transfer list
This example exchanges the "move all" buttons for a "select all / select none" checkbox and adds a counter.
{{"demo": "SelectAllTransferList.js", "bg": true}}
Limitations
The component comes with a couple of limitations:
- It only works on desktop. If you have a limited amount of options to select, prefer the Autocomplete component. If mobile support is important for you, have a look at #27579.
- There are no high-level components exported from npm. The demos are based on composition. If this is important for you, have a look at #27579.