フォーム
Transfer
2 つのリストの間で項目を移す部品。各行はラベル付きのチェックボックスになっています。
ReactVueWeb Components
Storybook で見る プレイグラウンド
使用例
<Transfer items={all} defaultValue={['a']} titles={['候補', '選択済み']} />設定できる項目
| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
items 必須 | 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 | — |
アクセシビリティ
- 文字と背景の明るさの差をしっかり取り、読みやすくしています。ライトでもダークでも、見やすさの国際基準 WCAG の最高ランク AAA（明るさの差が 7:1 以上）を満たします。
- マウスがなくても、キーボードだけですべての操作ができます。
- いまどこを操作しているかを示す枠（フォーカスの囲み）が、常にはっきり見えます。
- 利用者が「画面の動きを減らす」設定にしているときは、過剰なアニメーションを止めます。
どのコンポーネントも、だれにとっても使いやすいように、見やすさの国際基準 WCAG の最高ランク AAA（WCAG 2.1 AAA）を満たすよう作っています。