# Value

**`sonic-value`** prints one value from a data provider and updates when it changes. Set `dataProvider` (or inherit it from an ancestor) and point `key` at the field to show.

## Basic example

The form below writes `cabin` into the `value-checkin` provider; `sonic-value` reads it back.

<sonic-code>
  <template>
    <div formDataProvider="value-checkin" class="flex flex-wrap gap-4 mb-3">
      <sonic-radio name="cabin" value="Economy" checked>Economy</sonic-radio>
      <sonic-radio name="cabin" value="Business">Business</sonic-radio>
      <sonic-radio name="cabin" value="First">First</sonic-radio>
    </div>
    <p>Cabin: <sonic-value dataProvider="value-checkin" key="cabin"></sonic-value></p>
  </template>
</sonic-code>

The value is rendered as HTML, not escaped: only display trusted data. When the value is an object or is missing, nothing is printed.

## Nested key

`key` accepts a dot path, array indexes included.

<sonic-code>
  <template>
    <sonic-subscriber dataProvider="value-passenger" props='{"passenger":{"name":"Ada Lindqvist","seats":[{"number":"2A"}]}}'></sonic-subscriber>
    <p>
      <sonic-value dataProvider="value-passenger" key="passenger.name"></sonic-value>
      is seated in
      <sonic-value dataProvider="value-passenger" key="passenger.seats.0.number"></sonic-value>
    </p>
  </template>
</sonic-code>

## API reference

| Attribute | Values | Description |
|-----------|--------|-------------|
| `dataProvider` | string | Provider to read. Inherited from the closest ancestor when omitted |
| `key` | string (required) | Dot path of the value in the provider |

| Slot | Description |
|------|-------------|
| *(default)* | Content rendered after the value |
| `prefix` · `suffix` | Rendered around the default slot, after the value |