ttolbel UI

Component

Label value

A single row pairing a label on the left with its value on the right, or stacked vertically when the value needs more room, the building block of any detail or receipt screen.

The primitive

ReferenceREF-88213
label value.tsx
<NativeLabelValue label="Reference" value="REF-88213" />

Example

Stacked rows summarizing a completed payment, date, reference, amount, each one a single label-value pair.

Amount$250.00
ReferenceREF-88213
DateJun 27, 2026
label-value-example.tsx
<NativeLabelValue label="Amount" value="$250.00" />
<NativeLabelValue label="Reference" value="REF-88213" />
<NativeLabelValue label="Date" value="Jun 27, 2026" />

Capabilities

PropTypeDescription
labelrequiredstring
valuerequiredReact.ReactNode
layout"horizontal" | "vertical"Stack vertically (like iOS Form detail row) vs side-by-side
classNamestring