KvList
Label/value definition list — compose KvListItem children for each row.
SSR mode
Examples
User detail with 4 rows — last row uses ChildContent with a Badge
- Name
- Jane Smith
- jane.smith@example.com
- Created
- 12 Jan 2025
- Status
- Active
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| KvList | A <dl> definition list laid out in a two-column grid (grid-cols-[max-content_1fr]). Labels are left-aligned and max-content wide; values fill the remaining space. Populate with KvListItem children. |
| KvListItem | A single <dt>/<dd> pair inside a KvList. Use the Value string parameter for plain text, or supply ChildContent for richer content (e.g. a Badge or link). When both are provided, ChildContent takes precedence. |
KvList
A <dl> definition list laid out in a two-column grid (grid-cols-[max-content_1fr]). Labels are left-aligned and max-content wide; values fill the remaining space. Populate with KvListItem children.
| Property | Type | Required | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | Row items — typically KvListItem elements. |
KvListItem
A single <dt>/<dd> pair inside a KvList. Use the Value string parameter for plain text, or supply ChildContent for richer content (e.g. a Badge or link). When both are provided, ChildContent takes precedence.
| Property | Type | Required | Description |
|---|---|---|---|
| Label | string | Row label rendered as <dt class="text-muted-foreground">. | |
| Value | string? | Plain-text value. Rendered inside <dd> when ChildContent is null. | |
| ChildContent | RenderFragment? | Rich value content rendered inside <dd>. Takes precedence over Value when set. |