Key value
Composite Data display draft Gen UI partA labelled value: a fact row, a small tile, or a total.
Examples
HTML and CSS
Framework-free reference. Styles live in system/components/key-value.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 |
|---|---|---|
label * | string | |
value | string | |
variant | row | tile | total | row |
* required.
Slot rules
children: Amount, Time, Badge, Text. Optional single value node; use it instead of value for money and times.
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
card-children Card children: Image, Text, Stack, List, KeyValue, Tabs, MapSnippet, Progress, Divider, ActionRow.
sheet-children Bottom sheet children: Section, List, KeyValue, TextField, ActionRow.
Usage in recipes
6 of the original cards use it. Needed for V1. Priority table
Bot functions: All functions, Bill split and payments, Bookings, Email connect, Meet new people, More booking, Occasions and events, Trips.