转移列表输入非常适合需要从选项列表中选择和排序多个值的最终用户。在这个例子中，我们允许最终用户从一组嘉宾中选择并将他们移动到 VIP 列表：
在本节中，我们将介绍如何复制上面的“嘉宾与 VIP”示例的基本知识。
下面是一个带有最小必需道具的转移列表输入示例。如您所见，有两个列表框：源列表框和目标列表框。源列表框将包含选项列表，目标列表框将包含所选选项：
让我们添加一些标签道具，以便最终用户明确如何使用转移列表输入。我们将添加一个 label 道具来向用户解释指令，并添加 source-label 和 target-label 道具来指示哪个列表框是源，哪个是目标：
在这种状态下，没有传递选项，也没有选择值，我们可以通过设置 source-empty-message 和 target-empty-message 道具向用户显示自定义消息：
options 道具可以接受三种不同格式的值：
value 和 label 键的对象数组'A', 'B', 'C'{ a: 'A', b: 'B', c: 'C' }让我们继续用嘉宾名单填充转移列表的选项：
传输列表输入的_值_是一个数组。从源列表中选择的选项值将附加到数组中。为了在下面的示例中显示值的更改，让我们将传输列表输入包装在一个 FormKit 表单中，将传输列表输入的名称设置为 vips，并在一个 <pre> 标签中显示表单本身的值（如果您不熟悉 FormKit 表单，可以在这里阅读更多内容）：
通过在 transferlist 本身或包装的 form 或 group 上设置 value prop，可以使用值预填充传输列表输入。请记住，您传递给 value prop 的值需要与选项列表中值的键匹配：
通过设置 searchable prop，可以使传输列表输入可搜索。在这个例子中，我们将设置 searchable prop，并为搜索输入设置一个 placeholder prop：
传输列表输入将使用其自己的内部搜索功能过滤选项。您可以通过为 filter prop 提供一个自己的函数来替换此搜索功能。您的函数将接收两个参数，正在迭代的选项和当前搜索值：
默认情况下，传输列表输入将在选择时清除搜索输入。您可以通过将 clear-on-select prop 设置为 false 来更改此行为：
通过设置 max prop，可以将传输列表输入限制为最大数量的选定值。仅对于此示例，让我们将 max prop 设置为 2，以限制可以选择的 VIP 数量：
默认情况下，传输列表输入将在点击时添加或删除选项。您可以通过将 transfer-on-select 属性设置为 false 来更改此行为。现在，传输列表将表现得更像传统的传输列表：
这里我们有一个传输列表输入，它从异步函数加载选项。当组件挂载时，将调用该函数，并将选项依次加载到源列表框中：
现在假设我们的 API 请求没有获取到我们需要的所有选项，而是返回一个分页响应。传输列表输入可以通过对异步函数进行微小配置来处理分页。
当将选项属性分配给异步函数时，该函数将使用 FormKit 上下文对象作为其第一个参数进行调用。此上下文对象包含一个 page 属性（我们尝试加载的当前页面），由传输列表输入跟踪，以及 hasNextPage，这是一个回调函数，我们可以用它来告诉传输列表还有更多选项要加载：
传输列表输入还可以在用户搜索时异步加载选项。在这个例子中，我们将添加回 searchable 属性，并将 getGuests() 更改为 searchGuests()。当用户搜索时，searchGuests() 现在将使用与之前相同的上下文对象进行调用，但这次，我们将仅解构 search 属性。此外，我们将修改 getGuests() 以仅在提供搜索值时返回嘉宾：
传输列表输入还提供了一个 optionLoader 属性，允许您重新生成不在选项列表中的值。在这个例子中，我们将为传输列表提供一个初始值（一个嘉宾 ID），并将 optionLoader 分配给一个函数，该函数将向 API 发送请求以获取单个嘉宾数据：
请注意，在上面的示例中，optionLoader 函数 getGuest 传递了两个参数：所选选项的值（在这种情况下，为电影 ID）和 cachedOption。cachedOption 用于防止不必要的查找；如果 cachedOption 不是 null，则表示已经加载了所选选项，您可以直接返回 cachedOption。
您还可以使用 optionLoader 在选定值上获取选项列表中尚不存在的额外数据。在此示例中，在选择一个选项后，我们将执行查找以加载所选客人的年龄：
与其他 FormKit 输入一样，传输列表输入允许您使用插槽自定义其标记。
现在我们正在加载选定值的附加数据（所选客人的年龄和电子邮件地址），让我们使用 target-option 插槽自定义所选值的外观：
传输列表输入可用于创建排名列表，让我们用最伟大的 NBA 球员来做这个：
| Prop | Type | 默认 | 描述 |
|---|---|---|---|
| debounce | number | 200 | 对选项函数调用进行去抖动的毫秒数。 |
| options | any | [] | 用户可以从中选择的选项列表。 |
| filter | function | null | 用于为静态选项应用您自己的自定义过滤函数。 |
| option-loader | function | null | 用于为初始值进行水合，或执行额外请求以加载所选选项的更多信息。 |
| source-empty-message | string | undefined | 当没有选项可显示时呈现一条消息。 |
| target-empty-message | string | undefined | 当没有值可显示时呈现一条消息。 |
| max | number | undefined | 限制可以选择的选项数量。 |
| clear-on-select | boolean | true | 选择选项后清除搜索输入（仅适用于非通过函数加载的选项）。 |
| searchable | boolean | false | 启用搜索输入。 |
| source-label | string | undefined | 为源列表呈现一个标签。 |
| target-label | string | undefined | 为目标列表呈现一个标签。 |
| transfer-on-select | boolean | true | 自动将所选选项传输到目标列表。如果设置为 false，将呈现传输向前和传输向后按钮。 |
| 显示 通用 props | |||
| config | Object | {} | 提供给 input 的节点和此输入的任何后代节点的配置选项。 |
| delay | Number | 20 | 在调度 commit hook 前，输入值的去抖动毫秒数。 |
| dirtyBehavior | string | touched | 确定此输入的“dirty”标志设置方式。可以设置为 touched 或 compare — 默认为 touched，性能更好，但无法检测表单是否再次匹配其初始状态。 |
| errors | Array | [] | 要在此字段上显示的错误消息的字符串数组。 |
| help | String | '' | 帮助文本与输入关联的文本。 |
| id | String | input_{n} | 输入的唯一标识符。提供一个 id 还可以全局访问输入的节点。 |
| ignore | Boolean | false | 防止将输入包含在任何父级（组、列表、表单等）中。在仅用于 UI 而不是实际值的情况下非常有用。 |
| index | Number | undefined | 如果父级是列表，允许在给定索引处插入输入。如果输入的值未定义，它将继承该索引位置的值。如果它有一个值，它将在给定索引处将其插入到列表的值中。 |
| label | String | '' | 与输入关联的 label 元素的文本。 |
| name | String | input_{n} | 输入的名称，在数据对象中唯一标识。在一组字段中应该是唯一的。 |
| parent | FormKitNode | contextual | 默认情况下，父级是包装组、列表或表单，但此属性允许显式分配父级节点。 |
| prefix-icon | String | '' | 指定放置在 prefixIcon 部分的 图标。 |
| preserve | boolean | false | 在输入卸载时，在父组、列表或表单上保留输入的值。 |
| preserve-errors | boolean | false | 默认情况下，使用 setErrors 在输入上设置的错误会在输入时自动清除，将此属性设置为 true 可以保留错误，直到明确清除为止。 |
| sections-schema | Object | {} | 一个包含部分键和模式部分值的对象，其中每个模式部分应用于相应的部分。 |
| suffix-icon | String | '' | 指定放置在 suffixIcon 部分的 图标。 |
| type | String | text | 要从库中渲染的输入类型。 |
| validation | String, Array | [] | 要应用于输入的 验证 规则。 |
| validation-visibility | String | blur | 确定何时显示输入的验证失败规则。有效值为 blur、dirty 和 live。 |
| validation-label | String | {label prop} | 确定在验证错误消息中使用的标签，默认情况下，如果可用，则使用 label 属性，否则使用 name 属性。 |
| validation-rules | Object | {} | 附加的自定义验证规则，可用于验证 prop。 |
| value | Any | undefined | 为输入和/或其子元素提供初始值。不是响应式的。可以种子 整个组（表单）和列表。 |
您可以使用该章节的 "key" 定位输入的特定部分，从而修改该部分的类、HTML（通过 :sections-schema）或内容（通过插槽）。在此了解更多关于章节的信息。
| Section-key | 描述 |
|---|---|
| fieldset | 作为转移列表输入的根元素的 fieldset 元素。 |
| legend | 渲染标签的 legend 元素。 |
| source | 包含 sourceHeader、sourceControls 和 sourceListItems 部分的 div 元素。 |
| sourceHeader | 包含 sourceHeaderLabel 和 sourceHeaderItemCount 部分的 div 元素 |
| sourceHeaderLabel | 渲染 sourceLabel prop 的标签元素。 |
| sourceHeaderItemCount | 渲染源列表中的项目数量和所选项目数量的 span 元素。 |
| sourceControls | 包含 sourceSearchINput 和 sourceSearchClear 部分的 div 元素 |
| sourceSearch | 包含 sourceSearchInput 和 sourceSearchClear 部分的 div 元素 |
| sourceSearchInput | 用于搜索的文本输入元素。 |
| sourceSearchClear | 清除搜索输入的按钮元素。 |
| closeIcon | 包含清除搜索输入图标的 span。 |
| sourceListItems | 包含 sourceListItems 的 ul 元素。 |
| sourceEmptyMessage | 包含 emptyMessageInner 部分的 li 元素。 |
| emptyMessageInner | 渲染提供的空消息文本的 span 元素。 |
| sourceListItem | 包含 sourceOption 部分的 sourceListItems 部分的 li 元素。 |
| selectIcon | 当将 sourceListItem 设置为选定时，渲染选定图标的 span 元素。 |
| sourceOption | 渲染选项标签的 div 元素。 |
| sourceLoadMore | 包含 loadMoreInner 部分的 li 元素。 |
| loadMoreInner | 渲染加载图标的 span 元素。 |
| loaderIcon | 在加载发生时输出图标的 span 元素。 |
| transferControls | 包含 transferButtonForwardAll、transferButtonForward、transferButtonBackward 和 transferButtonBackwardAll 部分的 div 元素。 |
| transferButtonForwardAll | 将所有选项转移到目标列表的按钮元素。 |
| transferButtonForward | 将选定的选项转移到目标列表的按钮元素。 |
| transferButtonBackward | 将选定的选项转移到源列表的按钮元素。 |
| transferButtonBackwardAll | 将所有选项转移到源列表的按钮元素。 |
| controlLabel | 渲染控制标签的 span 元素。 |
| fastForwardIcon | 渲染快进图标的 span 元素。 |
| moveRightIcon | 渲染向右移动图标的 span 元素。 |
| moveLeftIcon | 渲染向左移动图标的 span 元素。 |
| rewindIcon | 渲染倒带图标的 span 元素。 |
| target | 包含 targetHeader、targetControls 和 targetListItems 部分的 div 元素。 |
| targetHeader | 包含 targetHeaderLabel 和 targetHeaderItemCount 部分的 div 元素 |
| targetHeaderLabel | 渲染 targetLabel prop 的标签元素。 |
| targetHeaderItemCount | 渲染目标列表中的项目数量和所选项目数量的 span 元素。 |
| targetListItems | 包含 targetListItems 的 ul 元素。 |
| targetEmptyMessage | 包含 emptyMessageInner 部分的 li 元素。 |
| targetListItem | 包含 targetOption 部分的 targetListItems 部分的 li 元素。 |
| targetLoadMore | 包含 loadMoreInner 部分的 li 元素。 |
| 显示 通用 section keys | |
| outer | 最外层的包装元素。 |
| wrapper | 标签和输入周围的包装器。 |
| label | 输入的标签。 |
| prefix | 默认情况下没有输出，但允许直接在输入元素之前放置内容。 |
| prefixIcon | 输出在前缀部分之前放置一个图标的元素。 |
| inner | 实际输入元素周围的包装器。 |
| suffix | 默认情况下没有输出，但允许直接在输入元素之后放置内容。 |
| suffixIcon | 输出在后缀部分之后放置一个图标的元素。 |
| input | 输入元素本身。 |
| help | 包含帮助文本的元素。 |
| messages | 包装所有消息的容器。 |
| message | 包含消息的元素（或多个元素） - 最常见的是验证和错误消息。 |