# VirtualListProps Source: /tuil/docs/reference/components/virtual-list/virtual-list-props Locale: en VirtualListProps component contract. {/* Generated by tooling/docs/generate-reference.ts. */} ## Type [#type] ```ts export interface VirtualListProps extends CommonComponentProps, SlottedComponentProps< VirtualListSlots, { readonly focused: boolean; readonly activeIndex: number; readonly offset: number; } > { readonly items: readonly TItem[]; readonly renderItem: ( item: TItem, context: VirtualListRenderContext, ) => ReactNode; readonly getItemKey: (item: TItem, index: number) => string; readonly getItemLabel?: (item: TItem, index: number) => string; readonly height?: number; readonly overscan?: number; readonly offset?: number; readonly defaultOffset?: number; readonly onOffsetChange?: (offset: number) => void | Promise; readonly activeIndex?: number; readonly defaultActiveIndex?: number; readonly onActiveIndexChange?: (index: number) => void | Promise; readonly onSelect?: (item: TItem, index: number) => void | Promise; readonly emptyMessage?: string; readonly staticLimit?: number; readonly autoFocus?: boolean; } ``` ## Members [#members] | Member | Type | Required | Description | Related types | | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `items` | `readonly TItem[]` | Yes | The `items` member uses the `readonly TItem[]` contract. | — | | `renderItem` | `(item: TItem, context: VirtualListRenderContext) => ReactNode` | Yes | The `renderItem` member uses the `(item: TItem, context: VirtualListRenderContext) => ReactNode` contract. | — | | `getItemKey` | `(item: TItem, index: number) => string` | Yes | The `getItemKey` member uses the `(item: TItem, index: number) => string` contract. | — | | `getItemLabel` | `((item: TItem, index: number) => string) \| undefined` | No | The `getItemLabel` member uses the `((item: TItem, index: number) => string) \| undefined` contract. | — | | `height` | `number \| undefined` | No | The `height` member uses the `number \| undefined` contract. | — | | `overscan` | `number \| undefined` | No | The `overscan` member uses the `number \| undefined` contract. | — | | `offset` | `number \| undefined` | No | The `offset` member uses the `number \| undefined` contract. | — | | `defaultOffset` | `number \| undefined` | No | The `defaultOffset` member uses the `number \| undefined` contract. | — | | `onOffsetChange` | `((offset: number) => void \| Promise) \| undefined` | No | The `onOffsetChange` member uses the `((offset: number) => void \| Promise) \| undefined` contract. | — | | `activeIndex` | `number \| undefined` | No | The `activeIndex` member uses the `number \| undefined` contract. | — | | `defaultActiveIndex` | `number \| undefined` | No | The `defaultActiveIndex` member uses the `number \| undefined` contract. | — | | `onActiveIndexChange` | `((index: number) => void \| Promise) \| undefined` | No | The `onActiveIndexChange` member uses the `((index: number) => void \| Promise) \| undefined` contract. | — | | `onSelect` | `((item: TItem, index: number) => void \| Promise) \| undefined` | No | The `onSelect` member uses the `((item: TItem, index: number) => void \| Promise) \| undefined` contract. | — | | `emptyMessage` | `string \| undefined` | No | The `emptyMessage` member uses the `string \| undefined` contract. | — | | `staticLimit` | `number \| undefined` | No | The `staticLimit` 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/data-display/virtual-list.tsx)