Show · ScrollList
Scroll through the list.


How to import

Basic Usage

The scrolling list provides a scrolling selection mode similar to the IOS operating system, while supporting scrolling to the specified window location selection and click selection.

API Reference


bodyHeightheight of scroll list bodynumber | string300
classNameclassname of wrapperstring''
footerBottom addonReactNode''
headerHead addonReactNode''
styleinline styleCSSProperties{}


cycledWhether it is an infinite loop, effective only if the mode is "wheel"booleanfalse
classNameclassname of scroll itemstring''
listList contentItem Data[][]
modemode selection"normal" | "wheel""wheel"
motionWhether to start the scroll animationMotiontrue
onSelectSelect callback(data: ItemData) => voidNOOP
selectIndexIndex of selected itemsnumber0
styleInline styleCSSProperties{}
transformFor the Transformation of the selected item, the return value is displayed as a copy(value: any, text: string) => stringv = > v


disabledWhether the item is prohibited or notboolean
textThe copy of each item.string
transformWhen the transformation is in the selected state, the return value is displayed as a copy, and if the ScrollItem component is passed at the same time, the transform method in ItemData will be selected first.(value: any, text: string) => stringv = > v
valueThe value of each itemany



  • ScrollItem support aria-label, indicates the label of current column.
  • ScrollItem uses aria-disabled to indicate whether the item is disabled
  • ScrollItem uses aria-selected to indicate whether the item is selected

Design Tokens