1 viewer
Back to Components
Component · Data

KeyValue

Key-value display layout for compact records.

Category
Data
Slots
7
States
1
Writer
Shared
cre8.primitive.key-value

Preview

Live renderShared SSR + WASM writers
Node Parameters
Network ID
cre8-devnetcanonical
Storage Backend
HyperDB + SQLitedurable
Compute Engine
CRE8VM RISC-Vsandboxed
Uptime
99.98%healthy
<KeyValue
  items={[
    { hint: "canonical", key: "Network ID", value: "cre8-devnet" },
    { hint: "durable", key: "Storage Backend", value: "HyperDB + SQLite" },
    { hint: "sandboxed", key: "Compute Engine", value: "CRE8VM RISC-V" },
    { hint: "healthy", key: "Uptime", value: "99.98%" }
  ]}
  title="Node Parameters"
/>

Anatomy

The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.

SlotDOM class
root.primitive-keyvalue
title.primitive-keyvalue__title
list.primitive-keyvalue__list
item.primitive-keyvalue__item
key.primitive-keyvalue__key
value.primitive-keyvalue__value
hint.primitive-keyvalue__hint
7 rows
State attribute
data-emptyfrom the isEmpty prop

States and platforms

The states the contract publishes, the platforms it declares, and the style recipes that dress it.

States
empty
Platforms
webnativeruntime-node
Recipes
unstyledruntime-console

Renderers

Shared writer
KeyValue renders through the one writer the server and the WASM DOM share, so both emit the same markup.

Every tag in the example above renders through a shared writer.

Declared adapters. A status is the manifest's declaration, not a measured parity result.

TargetRendererStatus
webreactexperimental
runtime-nodeview-nodeready
ssrhtml-dataready
terminalterminal-keyvalueplanned
nativenative-adapterexperimental
5 rows

Accessibility

The section and definition list stay labelled without relying on visual styling, and empty records announce fallback copy politely.

  • When a title is present, the section and definition list expose that title as their accessible name.
  • Empty records announce fallback copy through a polite status region without removing the structural container.