Label Value

Label values display a label and value pair in a compact format with the proper typography and spacing styles applied.

NameAda Lovelace

Usage

forge-label-value displays a readonly label and value pair, with an optional leading icon slot, plus empty, ellipsis, and inline. Use it for data the user can view but not edit, most often inside a card or a submitted form; reach for a text field with disabled instead only when the value is still part of an editable form. For long, text-heavy content, use a list instead — label value is meant for succinct data.

Rules

Use label value for readonly data with a short label and a short value.

Use it in place of a disabled text field when the value will never be edited on that screen.

Communicate elsewhere on the page whether and how the value can be edited.

Don't

Don't use label value for long titles or paragraphs of text — use a list instead.

Don't fill a screen with disabled text fields when label value pairs would read more clearly.

Don't imply interactivity — label value has no hover or focus state.

With an icon

Pair the value with a leading icon via the icon slot to reinforce its meaning.

An icon in the icon slot sits beside the label.

<forge-label-value>
  <forge-icon name="person" slot="icon">
  </forge-icon>
  <span slot="label">
    Name
  </span>
  <span slot="value">
    John Doe
  </span>
</forge-label-value>

<script type="module">
import { IconRegistry } from "@tylertech/forge/icon";
import { tylIconPerson } from "@tylertech/tyler-icons";
IconRegistry.define([tylIconPerson]);
</script>

Inline

Set inline to place the label and value on the same line instead of stacking them.

Inline places the label and value side by side.

<forge-label-value inline style>
  <span slot="label">
    Label
  </span>
  <span slot="value">
    A simple value
  </span>
</forge-label-value>

Empty

Set empty to give a missing value distinct styling instead of leaving it blank.

Empty gives a missing value distinct styling instead of leaving it blank.

<forge-label-value empty>
  <span slot="label">
    Status
  </span>
  <span slot="value">
    n/a
  </span>
</forge-label-value>

Ellipsis

Set ellipsis to truncate a value that’s too long for its container.

Ellipsis truncates a value that's too long for its container.

<div class="max-w-40">
  <forge-label-value ellipsis>
    <span slot="label">
      Description
    </span>
    <span slot="value">
      A value long enough to overflow this container's width.
    </span>
  </forge-label-value>
</div>

Label values are used to display a label and value pair in a compact format with the proper typography and spacing styles applied.

import "@tylertech/forge/label-value";

Properties

Property	Attribute	Type	Default	Description
`empty`	`empty`	`boolean`	`false`	If present, the value will be displayed in an alternative emphasized style.
`ellipsis`	`ellipsis`	`boolean`	`false`	If present, the value will be truncated with an ellipsis if it overflows its container.
`inline`	`inline`	`boolean`	`false`	If present, the label and value will be displayed on the same line.
`dense`	—	`boolean`	`false`	Deprecated. Use `inline` instead.

Slots

Name	Description
`label`	The label to display.
`value`	The value to display.
`icon`	An icon to display next to the label.

CSS Parts

Name	Description
`::part(root)`	The root layout container element.
`::part(label)`	The label container element.
`::part(value)`	The value container element.
`::part(icon)`	The icon container element.

CSS Custom Properties

Name	Description
`--forge-label-value-align`	Aligns the label and value. Possible values: `start` (default), `center`, `end`.
`--forge-label-value-label-spacing`	The spacing between the label and value.
`--forge-label-value-label-block-start-spacing`	The block start spacing for the label.
`--forge-label-value-label-block-end-spacing`	The block end spacing for the label.
`--forge-label-value-label-color`	The color to apply to the label.
`--forge-label-value-icon-spacing`	The spacing between the icon and the label.
`--forge-label-value-inline-label-spacing`	The spacing between the label and value when displayed inline.
`--forge-label-value-empty-color`	The color to apply to the value when empty.
`--forge-label-value-empty-style`	The font-style to apply to the value when empty.

Accessibility documentation coming soon.