Skip to main content
List(children: Component[]): Component;
List<V = string>(props: { selection: V; setSelection: (value: V) => void }, children: Component[]): Component;
​
children
Component[]
required
The list content. Typically contains ForEach or Section components.
​
props
object
Configuration options for selection tracking.

​
Support

​
Usage

​
Basic list

List([
    Text("Item 1"),
    Text("Item 2"),
    Text("Item 3")
])

​
With ForEach

List([
    ForEach(items, (item) =>
        Text(item.name)
    )
])

​
With sections

List([
    Section({ header: Text("Favorites") }, [
        ForEach(favorites, (fav) => Text(fav.name))
    ]),
    Section({ header: Text("Recent") }, [
        ForEach(recent, (item) => Text(item.name))
    ])
])

​
With selection tracking

const body = () => {
    const [selected, setSelected] = useState("")

    return List(
        { selection: selected, setSelection: setSelected },
        [
            ForEach(items, (item) =>
                Text(item.name).tag(item.id)
            )
        ]
    )
}

​
Notes

  • List provides built-in scrolling. You do not need to wrap it in a ScrollView.
  • For selection tracking, each row should have a .tag() modifier so the list can identify which item is selected.
  • For custom list styling, use the .listStyle() modifier. For row-level customization, use .listRowBackground() and .listRowSeparator().
  • For a non-list scrollable layout, use ScrollView with LazyVStack.

​
See Also

  • Section — grouping with headers and footers
  • ForEach — iterating over data
  • ScrollView — generic scrollable container