# display-field — Examples

A display-only labeled value. No input semantics (no focus, no
contenteditable, no form participation). For an editable field use
`field-ui` + `input-ui`; for a metric use `stat-ui`; for many read-only
pairs use `description-list-ui`.

## Basic

```html
<display-field-ui label="Account ID" value="acct_1Q9xK2"></display-field-ui>
```

## Masked value

```html
<display-field-ui
  label="Card on file"
  value="•••• •••• •••• 4242"
  variant="masked"></display-field-ui>
```

## With a leading icon and a hint

```html
<display-field-ui
  label="Card on file"
  value="•••• 4242"
  variant="masked"
  icon="lock"
  hint="Expires 12/26"></display-field-ui>
```

## Hosting a third-party element (Stripe Element)

Slot the foreign element as the default child; it takes the value region
under the label. The host's `role="group"` + `aria-labelledby` names it for
assistive tech.

```html
<display-field-ui label="Card number">
  <div id="card-element"><!-- stripe.elements().create('card').mount('#card-element') --></div>
</display-field-ui>
```
