Transfer List

View pricing →

Pro installation quickstart 🚀

Introduction

Transfer List Overview

1 min

The transfer list input is ideal for situations where the end-user needs to select and sort multiple values from a list of options. In this example, we are allowing the end-user to select from a group of guests and move them to a VIP list:

Load live example

Getting started

In this section, we will be covering the basics of how to replicate the 'Guests vs VIPs' example from above.

Base input

Below is an example of the transfer list input with the minimum required props. As you can see, there are two list boxes: the source list box and the target list box. The source list box will contain the list of options, and the target list box will contain the selected options:

Load live example

Labels

Let's add some label props to make clear to the end-user how to use the transfer list input. We'll add a label prop to explain the directive to the user, and source-label and target-label props to indicate which list box is the source and which is the target:

Load live example

Source and target empty messages

In this state, with no options passed and no values selected, we can display a custom message to the user by setting the source-empty-message and target-empty-message props:

Load live example

Defining options

The options prop can accept three different formats of values:

  • An array of objects with value and label keys
  • An array of strings 'A', 'B', 'C'
  • An object literal with key-value pairs { a: 'A', b: 'B', c: 'C' }
  • A function that returns any of the above

Let's go ahead and populate the transfer list's options with a list of guest names:

Load live example

Values

The value of the transfer list input is an array. Selected option values from the source list will be appended to the array. To show the value changing in the example below, let's wrap the transfer list input in a FormKit form, set the name of the transfer list input to vips, and show the value of the form itself in a <pre> tag (if you are unfamiliar with FormKit forms, you can read more here):

Load live example

Initial values

The transfer list input can be pre-populated with values by setting the value prop on the transferlist itself or a wrapping form or group. Remember that the values you pass to the value prop need to match the keys of the values in your option list:

Load live example

Searchable

The transfer list input can be made searchable by setting the searchable prop. In this example we'll set the searchable prop and also set a placeholder prop for the search input:

Load live example
Only the options are searched
The search input only searches through the options in the source options list. It does not return options that have already been transferred to the target list.

Filtering

The transfer list input will filter options with its own internal search function. You can replace this search function by providing the filter prop a function of your own. Your function will receive two arguments, the option being iterated over and the current search value:

Load live example

Clear on select

By default, the transfer list input will clear the search input on select. You can change this behavior by setting the clear-on-select prop to false:

Max

The transfer list input can be limited to a maximum number of selected values by setting the max prop. For just this example, let's set the max prop to 2 to limit the number of VIPs that can be selected:

Load live example

Transfer on select

By default, the transfer list input will add or remove options on click. You can change this behavior by setting the transfer-on-select prop to false. Now, the transfer list will behave more like a traditional transfer list:

Load live example

Asynchrony

Asynchronous options

Here we have a transfer list input that loads its options from an asynchronous function. The function is called when the component is mounted and the options are subsequently loaded into the source list box:

Load live example

Pagination

Now let's say that our API request does not fetch all the options we need, but instead returns a paginated response. The transfer list input can handle pagination with minor configuration to the asynchronous function.

When assigning the options prop to an asynchronous function, the function will be called with the FormKit context object as its first argument. This context object contains a page property (the current page we are attempting to load) that is tracked by the transfer list input, and hasNextPage, which is a callback function we can use to tell the transfer list that there are more options to load:

Load live example

The transfer list input can also load options asynchronously when the user searches. In this example, we'll add back the searchable prop, and change getGuests() to searchGuests(). When the user searches, searchGuests() will now be called with the same context object as before, but this time, we will destructure just the search property. Additionally, we'll modify getGuests() to only return guests when a search value is provided:

Load live example

Option loader

Rehydrating values

The transfer list input also provides an optionLoader prop that allows you to rehydrate values that are not in the options list. In this example, we'll provide the transfer list an initial value (a guest ID), and assign the optionLoader to a function that will make a request to the API to fetch the individual guest data:

Load live example

Notice in the example above that the optionLoader function getGuest is passed two arguments: the value of the selected option (in this case, the movie ID) and the cachedOption. The cachedOption is used for preventing unnecessary lookups; if the cachedOption is not null it means the selected option has already been loaded, and you can return the cachedOption directly.

Fetching additional data

You can also use use the optionLoader to fetch additional data on selected values that is not already in the options list. In this example, after selecting an option, we are going to perform a look-up to load the selected guest's age:

Load live example

Slots

Just like any other FormKit input, the transfer list input allows you to utilize slots to customize its markup.

Source and target options

Now that we are loading additional data on selected values (the age and email address of the selected guest), let's customize the look of the selected values by using the target-option slots:

Load live example

Examples

Ranked order

The transfer list input can be used to create a ranked list, let's do that with the greatest NBA players:

Load live example

Props & Attributes

PropTypeDefaultDescription
debouncenumber200Number of milliseconds to debounce calls to an options function.
optionsany[]The list of options the user can select from.
filterfunctionnullUsed to apply your own custom filter function for static options.
option-loaderfunctionnullUsed for hydrating initial value, or performing an additional request to load more information of a selected option.
source-empty-messagestringundefinedRenders a message when there are no options to display.
target-empty-messagestringundefinedRenders a message when there are no values to display
maxnumberundefinedLimits the number of options that can be selected.
clear-on-selectbooleantrueClears the search input after selecting an option (only for options that are not loaded via function).
searchablebooleanfalseEnables the search input for the source list.
target-searchablebooleanfalseEnables the search input for the target list.
source-labelstringundefinedRenders a label for the source list.
target-labelstringundefinedRenders a label for the target list.
transfer-on-selectbooleantrueAutomatically transfers selected options to the target list. If set to false, will render transfer forward and transfer backward buttons.
Show Universal props
configObject{}Configuration options to provide to the input’s node and any descendent node of this input.
delayNumber20Number of milliseconds to debounce an input’s value before the commit hook is dispatched.
dirtyBehaviorstringtouchedDetermines how the "dirty" flag of this input is set. Can be set to touched or comparetouched (the default) is more performant, but will not detect when the form is once again matching its initial state.
errorsArray[]Array of strings to show as error messages on this field.
helpString''Text for help text associated with the input.
idStringinput_{n}The unique id of the input. Providing an id also allows the input’s node to be globally accessed.
ignoreBooleanfalsePrevents an input from being included in any parent (group, list, form etc). Useful when using inputs for UI instead of actual values.
indexNumberundefinedAllows an input to be inserted at the given index if the parent is a list. If the input’s value is undefined, it inherits the value from that index position. If it has a value it inserts it into the lists’s values at the given index.
labelString''Text for the label element associated with the input.
nameStringinput_{n}The name of the input as identified in the data object. This should be unique within a group of fields.
parentFormKitNodecontextualBy default the parent is a wrapping group, list or form — but this props allows explicit assignment of the parent node.
prefix-iconString''Specifies an icon to put in the prefixIcon section.
preservebooleanfalsePreserves the value of the input on a parent group, list, or form when the input unmounts.
preserve-errorsbooleanfalseBy default errors set on inputs using setErrors are automatically cleared on input, setting this prop to true maintains the error until it is explicitly cleared.
sections-schemaObject{}An object of section keys and schema partial values, where each schema partial is applied to the respective section.
suffix-iconString''Specifies an icon to put in the suffixIcon section.
typeStringtextThe type of input to render from the library.
validationString, Array[]The validation rules to be applied to the input.
validation-visibilityStringblurDetermines when to show an input's failing validation rules. Valid values are blur, dirty, and live.
validation-labelString{label prop}Determines what label to use in validation error messages, by default it uses the label prop if available, otherwise it uses the name prop.
validation-rulesObject{}Additional custom validation rules to make available to the validation prop.
valueAnyundefinedSeeds the initial value of an input and/or its children. Not reactive. Can seed entire groups (forms) and lists..

Sections

You can target a specific section of an input using that section's "key", allowing you to modify that section's classes, HTML (via :sections-schema), or content (via slots). Read more about sections here.

Wrapper of transfer list

View on a larger screen to see this section diagram.

Choose VIPs for the party
You can select up to 3 VIPs.
Source list
Transfer controls
Target list
Sorry, you may not add more than 3 guests.

Source

View on a larger screen to see this section diagram.

Guests
97
No guests found
John Doe

Transfer controls

View on a larger screen to see this section diagram.

Target

View on a larger screen to see this section diagram.

VIPs
3
No VIPs selected
John Doe
Section-keyDescription
fieldsetA fieldset element that acts as the root element for the transfer list input.
legendA legend element that renders the label.
sourceA div element that contains the sourceHeader, sourceControls, and sourceListItems sections.
sourceHeaderA div element that contains the sourceHeaderLabel and sourceHeaderItemCount sections
sourceHeaderLabelA label element that renders the sourceLabel prop.
sourceHeaderItemCountA span element that renders the number of items and number of items selected in the source list.
sourceControlsA div element that contains the sourceSearchINput and sourceSearchClear sections
sourceSearchA div element that contains the sourceSearchInput and sourceSearchClear sections
sourceSearchInputA text input element used for searching.
sourceSearchClearA button element that clears the search input.
closeIconThe span used containing the icon for the clear search input.
sourceListItemsA ul element that contains the sourceListItems.
sourceEmptyMessageA li element that contains the emptyMessageInner section.
emptyMessageInnerA span element that renders the provided empty message text.
sourceListItemA li element for the sourceListItems section that contains the sourceOption section.
selectIconA span elemenet that renders the selected icon when the sourceListItem is set to selected.
sourceOptionA div element that renders the option label.
sourceLoadMoreA li element that contains the loadMoreInner section.
loadMoreInnerA span element that renders the loading icon.
loaderIconA span element that outputs an icon when loading is occurring.
transferControlsA div element that contains the transferButtonForwardAll, transferButtonForward, transferButtonBackward, and transferButtonBackwardAll sections.
transferButtonForwardAllA button element that transfers all options to the target list.
transferButtonForwardA button element that transfers selected options to the target list.
transferButtonBackwardA button element that transfers selected options to the source list.
transferButtonBackwardAllA button element that transfers all options to the source list.
controlLabelA span element that renders the control label.
fastForwardIconA span element that renders the fast forward icon.
moveRightIconA span element that renders the move right icon.
moveLeftIconA span element that renders the move left icon.
rewindIconA span element that renders the rewind icon.
targetA div element that contains the targetHeader, targetControls, and targetListItems sections.
targetHeaderA div element that contains the targetHeaderLabel and targetHeaderItemCount sections
targetHeaderLabelA label element that renders the targetLabel prop.
targetHeaderItemCountA span element that renders the number of items and number of items selected in the target list.
targetListItemsA ul element that contains the targetListItems.
targetEmptyMessageA li element that contains the emptyMessageInner section.
targetListItemA li element for the targetListItems section that contains the targetOption section.
targetLoadMoreA li element that contains the loadMoreInner section.
Show Universal section keys
outerThe outermost wrapping element.
wrapperA wrapper around the label and input.
labelThe label of the input.
prefixHas no output by default, but allows content directly before an input element.
prefixIconAn element for outputting an icon before the prefix section.
innerA wrapper around the actual input element.
suffixHas no output by default, but allows content directly after an input element.
suffixIconAn element for outputting an icon after the suffix section.
inputThe input element itself.
helpThe element containing help text.
messagesA wrapper around all the messages.
messageThe element (or many elements) containing a message — most often validation and error messages.

Accessibility

All FormKit inputs are designed with the following accessibility considerations in mind. Help us continually improve accessibility for all by filing accessibility issues here:

Semantic markupAria attributesKeyboard accessibleFocus indicatorsColor contrast with the provided themeAccessible labels, help text, and errors
Section KeyAttributeDefaultDescription
fieldsetrolepresentationIndicates to assistive technologies that this element functions as presentation.
aria-describedbyAssociates an element with a description, aiding screen readers.
sourceHeaderrolepresentationIndicates to assistive technologies that this element functions as presentation.
sourceHeaderLabelforAssociates the label to an input element. Users can click on the label to focus the input or to toggle between states.
sourceHeaderItemCountrolepresentationIndicates to assistive technologies that this element functions as presentation.
aria-labelProvides an accessible name.
sourceSearchInputrolesearchboxIndicates to assistive technologies that this element functions as a searchbox.
aria-labelProvides an accessible name.
sourceSearchCleararia-labelProvides an accessible name.
sourceListItemstabindex-1 or 0Prioritizes keyboard focus order by setting it to -1 when searchable or there are no source options and 0 when otherwise.
aria-activedescendantManage focus to the current active descendent element.
rolelistboxIndicates to assistive technologies that this element functions as a listbox.
aria-multiselectabletrueIndicate it allows multiple items to be selected simultaneously.
aria-roledescriptionProvides a description that this element role.
sourceListItemaria-selectedIndicate this element is currently selected.
roleoptionIndicates to assistive technologies that this element functions as a option.
sourceLoadMoretabindex-1Prioritizes keyboard focus order by setting it to -1.
aria-selectedfalseIndicate this element is never selected.
sourceEmptyMessagerolepresentationIndicates to assistive technologies that this element functions as presentation.
targetHeaderrolepresentationIndicates to assistive technologies that this element functions as presentation.
targetHeaderLabelforAssociates the label to an input element. Users can click on the label to focus the input or to toggle between states.
targetHeaderItemCountrolepresentationIndicates to assistive technologies that this element functions as presentation.
aria-labelProvides an accessible name.
targetListItemstabindex-1 or 0Prioritizes keyboard focus order by setting it to -1 when searchable or there are no source options and 0 when otherwise.
aria-activedescendantManage focus to the current active descendent element.
rolelistboxIndicates to assistive technologies that this element functions as a listbox.
aria-multiselectabletrueIndicate it allows multiple items to be selected simultaneously.
aria-roledescriptionProvides a description that this element role.
targetListItemaria-selectedIndicate this element is currently selected.
roleoptionIndicates to assistive technologies that this element functions as a option.
targetLoadMoretabindex-1Prioritizes keyboard focus order by setting it to -1.
aria-selectedfalseIndicate this element is never selected.
targetEmptyMessagerolepresentationIndicates to assistive technologies that this element functions as presentation.
transferButtonForwardaria-labelProvides an accessible name.
transferButtonForwardAllaria-labelProvides an accessible name.
transferButtonBackwardaria-labelProvides an accessible name.
transferButtonBackwardAllaria-labelProvides an accessible name.
Show Universal section key
labellabelforAssociates the label to an input element. Users can click on the label to focus the input or to toggle between states.
inputinputdisabledDisables an HTML element, preventing user interaction and signaling a non-interactive state.
aria-describedbyAssociates an element with a description, aiding screen readers.
aria-requiredAdds this attribute when validation is required.
iconiconforWhenever icon is defined as a label it links it to an input element.

Keyboard Interactions

Keyboard EventDescription
TabMoves the focus to the next focusable input on the page.
Shift + TabMoves the focus to the previous focusable input on the page.