Forms
Transfer
Two lists you move items between. Each row is a labeled checkbox.
ReactVueWeb Components
View in Storybook Playground
Examples
<Transfer items={all} defaultValue={['a']} titles={['候補', '選択済み']} />Props
| Name | Type | Default | Description |
|---|---|---|---|
items required | TransferItem[] | — | All available items. |
value | string[] | — | Controlled values currently in the target list. |
defaultValue | string[] | — | Initial target values when uncontrolled. @default [] |
onChange | (target: string[]) => void | — | Called with the updated target values. |
titles | [string, string] | — | `[source, target]` list titles. @default ['Available', 'Selected'] |
toTargetLabel | string | Add selected | Label for the move-to-target button. @default 'Add selected' |
toSourceLabel | string | Remove selected | Label for the move-to-source button. @default 'Remove selected' |
className | string | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.