List
Container Data display draft Gen UI partA run of list items. Shows at most 5, then a "Show more" text button.
Examples
HTML and CSS
Framework-free reference. Styles live in system/components/list.css and read only tokens. Wrap markup in .v-root.
Rendered markup of the anatomy example
Props and slots
The component API. Gen UI JSON uses these names, and the Flutter widget should mirror them.
Props
| Prop | Values | Default |
|---|---|---|
visible | number | 5 |
divided | boolean | |
gap | none | sm | none |
moreLabel | string |
* required.
Slot rules
children: ListItem.
In Gen UI
How VelioBot uses this part. The bot returns JSON; the validator checks it; the renderer draws it.
JSON node
Every node may also carry id, grow, attribution, privateOnly and fallbackText.
Rules that name this part
listitem-leading List item leading: Icon, Avatar, Avatar stack, Image, Checkbox, Radio (and Time in stacked format).
listitem-trailing List item trailing: Text, Amount, Time, Badge, an icon, text or small secondary/tonal Button, Toggle, Checkbox, Chip, Icon, Avatar.
card-children Card children: Image, Text, Stack, List, KeyValue, Tabs, MapSnippet, Progress, Divider, ActionRow.
sheet-children Bottom sheet children: Section, List, KeyValue, TextField, ActionRow.
list-max A list shows at most 5 items, then "Show more".
Usage in recipes
15 of the original cards use it. Needed for V1. Priority table
Bot functions: Bill split and payments, Bookings, Calendar and itinerary, Community and PopTonight picks, Email connect, Friend catchups, Group plans, Learn from chats and posts, Meet new people, Occasions and events, Onboarding and profile, Plan capture, Plan day and live ETA, Suggestions, Trips, Video calls with notes, Voice calls with notes.