Concorde functional component — 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. Doc ID: core/components/functional/value/value. Keywords: Concorde, supersoniks, core/components/functional/value/value, value, Value, functional component, sonic-value, web component, dataProvider, key, cabin, value-checkin, prefix. URL: https://concorde.supersoniks.org/core/components/functional/value.

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.

<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>

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-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>

API reference