CenturyLink
Lumen
Lumen Enterprise Portal
  • Getting Started
    • Introduction
    • Installation
    • Development workflow
    • Browser support
    • What's new
  • Foundations
      • Overview
      • Using the keyboard
      • Page structure
      • Color and sensory
      • Images
      • Text
      • Links and forms
      • Tables
      • Other
      • Color
      • Design tokens
      • Grid
  • Components
    • Accordion
    • Activity
    • Alert
    • Avatar
    • Badge
    • Brand
    • Breadcrumb
    • Button
    • Button group
    • Cache Loader
    • Card
    • Carousel
    • Checkbox
    • Copy text
    • Data table
    • Date picker
    • Divider
    • Drawer
    • Dropdown
    • Expansion panel
    • File input
    • Flag icon
    • Footer
    • Header
    • Icon
    • Label
    • Link
    • Marketing icon
    • Mobile navigation
    • Modal
    • Number input
    • Pagination
    • Phone Input
    • Picker
    • Picker group
    • Popover
    • Price
    • Progress
    • Radio button
    • Range slider
    • Search input
    • Select
    • Sidenav
    • Skeleton
    • Spinner
    • Stat
    • Steps
    • Table
    • Tabs
    • Tags
    • Text input
    • Textarea
    • Time picker
    • Toggle switch
    • Toolbar
    • Tooltip
    • Transfer list
  • Utilities
    • Border
    • Color
    • Display
    • Flex
    • Image
    • Opacity
    • Overflow
    • Position
    • Shadow
    • Sizing
    • Spacing
    • Text
    • Vertical-align
    • Z-index
  • Templates
    • App Layout
    • Card
    • Error 404
    • Error 500
    • State

Transfer list

Transfer list is used to organize and select items.
  • Examples
  • Properties
  • Accessibility

Examples

JavaScript

Props

Property
Description
Interface
Default
config
To customize Transfer list details
{
  checkbox?: boolean;
  columns: {
    from: {
      title: string;
      description?: string;
    };
    to: {
      title: string;
      description?: string;
    };
  };
  searchInput?: boolean;
}
undefined
transferListData
To provide Transfer list with data
TransferListItem[]
undefined
modal
To define transfer list as modal or add modal configuration
TransferListModalConfig | boolean
undefined

Interfaces and types

Name
Interface
TransferListItem
interface TransferListItem {
  label: string;
  locked?: boolean;
  selected: boolean;
  value: string;
  wildcard?: boolean;
}
TransferListModalConfig
interface TransferListModalConfig {
  ariaLabel?: boolean;
  icon?: string;
  title?: boolean;
  tooltipMsg?: string;
}

Accessibility

Accessibility guidelines coming soon