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 summary screen.

Standalone

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

Example

Stacked rows summarizing a detail view (date, reference, amount), each one a single label-value pair.

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

Capabilities

PropTypeDescription
labelrequiredstring-
valuerequiredReact.ReactNode-
layout"horizontal" | "vertical"Stack vertically (label above value) vs side-by-side
classNamestring-