# TransferListProps Source: /tuil/docs/reference/components/transfer-list/transfer-list-props Locale: en TransferListProps component contract. {/* Generated by tooling/docs/generate-reference.ts. */} ## Type [#type] ```ts export interface TransferListProps extends CommonComponentProps, SlottedComponentProps< TransferListSlots, { readonly focused: boolean; readonly side: TransferSide; readonly activeIndex: number; } > { readonly items: readonly TransferListItem[]; readonly value?: readonly string[]; readonly defaultValue?: readonly string[]; readonly onValueChange?: ( selectedIds: readonly string[], ) => void | Promise; readonly onTransfer?: ( item: TransferListItem, direction: "select" | "remove", ) => void | Promise; readonly availableTitle?: string; readonly selectedTitle?: string; readonly height?: number; readonly autoFocus?: boolean; } ``` ## Members [#members] | Member | Type | Required | Description | Related types | | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `items` | `readonly TransferListItem[]` | Yes | The `items` member uses the `readonly TransferListItem[]` contract. | — | | `value` | `readonly string[] \| undefined` | No | The `value` member uses the `readonly string[] \| undefined` contract. | — | | `defaultValue` | `readonly string[] \| undefined` | No | The `defaultValue` member uses the `readonly string[] \| undefined` contract. | — | | `onValueChange` | `((selectedIds: readonly string[]) => void \| Promise) \| undefined` | No | The `onValueChange` member uses the `((selectedIds: readonly string[]) => void \| Promise) \| undefined` contract. | — | | `onTransfer` | `((item: TransferListItem, direction: "select" \| "remove") => void \| Promise) \| undefined` | No | The `onTransfer` member uses the `((item: TransferListItem, direction: "select" \| "remove") => void \| Promise) \| undefined` contract. | — | | `availableTitle` | `string \| undefined` | No | The `availableTitle` member uses the `string \| undefined` contract. | — | | `selectedTitle` | `string \| undefined` | No | The `selectedTitle` member uses the `string \| undefined` contract. | — | | `height` | `number \| undefined` | No | The `height` member uses the `number \| undefined` contract. | — | | `autoFocus` | `boolean \| undefined` | No | The `autoFocus` member uses the `boolean \| undefined` contract. | — | | `variant` | `string \| undefined` | No | The `variant` member uses the `string \| undefined` contract. | — | | `size` | `"sm" \| "md" \| "lg" \| undefined` | No | The `size` member uses the `"sm" \| "md" \| "lg" \| undefined` contract. | — | | `unstyled` | `boolean \| undefined` | No | The `unstyled` member uses the `boolean \| undefined` contract. | — | | `className` | `string \| undefined` | No | The `className` member uses the `string \| undefined` contract. | — | | `layout` | `Partial> \| undefined` | No | The `layout` member uses the `Partial> \| undefined` contract. | — | | `id` | `string \| undefined` | No | The `id` member uses the `string \| undefined` contract. | — | | `testId` | `string \| undefined` | No | The `testId` member uses the `string \| undefined` contract. | — | | `role` | `SemanticRole \| undefined` | No | The `role` member uses the `SemanticRole \| undefined` contract. | [`SemanticRole`](/tuil/docs/reference/packages/core/api/semantic-role) | | `label` | `string \| undefined` | No | The `label` member uses the `string \| undefined` contract. | — | | `description` | `string \| undefined` | No | The `description` member uses the `string \| undefined` contract. | — | | `disabled` | `boolean \| undefined` | No | The `disabled` member uses the `boolean \| undefined` contract. | — | | `readOnly` | `boolean \| undefined` | No | The `readOnly` member uses the `boolean \| undefined` contract. | — | | `selected` | `boolean \| undefined` | No | The `selected` member uses the `boolean \| undefined` contract. | — | | `checked` | `boolean \| undefined` | No | The `checked` member uses the `boolean \| undefined` contract. | — | | `expanded` | `boolean \| undefined` | No | The `expanded` member uses the `boolean \| undefined` contract. | — | | `valueText` | `string \| undefined` | No | The `valueText` member uses the `string \| undefined` contract. | — | | `slots` | `Partial> \| undefined` | No | The `slots` member uses the `Partial> \| undefined` contract. | [`BoxProps`](/tuil/docs/reference/packages/ink/api/box-props), [`SlotComponents`](/tuil/docs/reference/packages/theme/api/slot-components), [`TextProps`](/tuil/docs/reference/packages/ink/api/text-props) | | `slotProps` | `Partial> \| undefined` | No | The `slotProps` member uses the `Partial> \| undefined` contract. | [`BoxProps`](/tuil/docs/reference/packages/ink/api/box-props), [`SlotProps`](/tuil/docs/reference/packages/theme/api/slot-props), [`TextProps`](/tuil/docs/reference/packages/ink/api/text-props) | ## Source [#source] [View the secondary source reference](https://github.com/mwillbanks/tuil/blob/main/registry/forms/transfer-list.tsx)