Component reference
Transfer
Assign a subset of available permissions.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { useState } from "react";
import { Transfer, type PimoluTransferItem, Button } from "@pimolu/react";
const employees: PimoluTransferItem[] = [
{
key: "alice",
label: "Alice Martin",
description: "Product designer",
},
{
key: "bob",
label: "Bob Chen",
description: "Front-end engineer",
},
{
key: "carol",
label: "Carol Diallo",
description: "Engineering manager",
},
{
key: "dana",
label: "Dana Novak",
description: "Data analyst",
},
{
key: "eli",
label: "Eli Moreau",
description: "Platform engineer",
disabled: true,
},
{
key: "fatou",
label: "Fatou Ndiaye",
description: "Support lead",
},
];
function AccessExample() {
const [targets, setTargets] = useState<string[]>([
"alice",
"bob",
]);
return (
<div className="grid gap-5 min-w-0">
<Transfer
data={employees}
targetKeys={targets}
onChange={setTargets}
titles={[
"Available",
"With access"
]}
searchable
showCount
listHeight={230}
/>
<div className="flex flex-wrap items-center gap-3 min-w-0 justify-between">
<span className="text-sm text-muted leading-relaxed">
{targets.length} teammate
{targets.length === 1 ? "" : "s"} with access
</span>
<Button
size="sm"
appearance="ghost"
onClick={() => setTargets([])}
disabled={targets.length === 0}
>
Revoke all
</Button>
</div>
</div>
);
}
export function DemoExample() {
return (<AccessExample />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Search and bulk moves
Each list filters independently; “move all” skips disabled items.
Custom rendering
render replaces the default label and description while the checkbox keeps an accessible name.
States
A disabled transfer keeps its values visible but blocks every interaction; an empty target shows its empty state.
Usage
Keep transferred ids authoritative and avoid treating transfer selection as authorization.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluTransferItem
Type source| Name | Type | Default | Description |
|---|---|---|---|
keyRequired | string | — | Public Pimolu prop; see the source declaration for details. |
labelRequired | string | — | Visible label associated with the control. |
description | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
disabled | boolean | undefined | false | Public Pimolu prop; see the source declaration for details. |
keyRequiredstringNo default extracted.
Public Pimolu prop; see the source declaration for details.
labelRequiredstringNo default extracted.
Visible label associated with the control.
descriptionstring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
disabledboolean | undefinedDefault: false
Public Pimolu prop; see the source declaration for details.
PimoluTransferProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
dataRequired | readonly PimoluTransferItem[] | — | Public Pimolu prop; see the source declaration for details. |
targetKeys | readonly string[] | undefined | — | Controlled keys of the target (right) list. |
defaultTargetKeys | readonly string[] | undefined | [] | Initial target keys when uncontrolled. |
onChange | ((targetKeys: string[]) => void) | undefined | — | Called with the next target keys after a move. |
titles | readonly [string, string] | undefined | — | [source title, target title]. |
searchable | boolean | undefined | false | Render a search field above each list. |
disabled | boolean | undefined | false | Disable every checkbox, search field and move control. |
showCount | boolean | undefined | true | Show the number of items in each list header. |
showMoveAll | boolean | undefined | true | Show the "move all" controls next to the selected-item controls. |
listHeight | string | number | undefined | 240 | Height of each scrollable list. Defaults to 240. |
render | ((item: PimoluTransferItem) => ReactNode) | undefined | — | Custom content for an item; replaces the label and description. |
emptyMessage | string | undefined | "No items." | Public Pimolu prop; see the source declaration for details. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
style | CSSProperties | undefined | — | Public Pimolu prop; see the source declaration for details. |
aria-label | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
dataRequiredreadonly PimoluTransferItem[]No default extracted.
Public Pimolu prop; see the source declaration for details.
targetKeysreadonly string[] | undefinedNo default extracted.
Controlled keys of the target (right) list.
defaultTargetKeysreadonly string[] | undefinedDefault: []
Initial target keys when uncontrolled.
onChange((targetKeys: string[]) => void) | undefinedNo default extracted.
Called with the next target keys after a move.
titlesreadonly [string, string] | undefinedNo default extracted.
[source title, target title].
searchableboolean | undefinedDefault: false
Render a search field above each list.
disabledboolean | undefinedDefault: false
Disable every checkbox, search field and move control.
showCountboolean | undefinedDefault: true
Show the number of items in each list header.
showMoveAllboolean | undefinedDefault: true
Show the "move all" controls next to the selected-item controls.
listHeightstring | number | undefinedDefault: 240
Height of each scrollable list. Defaults to 240.
render((item: PimoluTransferItem) => ReactNode) | undefinedNo default extracted.
Custom content for an item; replaces the label and description.
emptyMessagestring | undefinedDefault: "No items."
Public Pimolu prop; see the source declaration for details.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
styleCSSProperties | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
aria-labelstring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
Accessibility
- Name both lists and transfer actions; expose selection and counts without color alone.