# Value

Simply shows a value from a data provider.
You can target sub data value using dot syntax.
The value reacts to changes.

* Below is a form that helps you to set a value for the field "preference" in the data target with id "value-example"
<sonic-code>
  <template>
    <div formDataProvider="value-example">
      which one do you prefer  ?
      <sonic-radio name="preference" checked value="dogs"> Dogs</sonic-radio>
      <sonic-radio name="preference" value="cats"> Cats</sonic-radio>
    </div>
  </template>
</sonic-code>
* Then you can see live value of the preference using this code :
<sonic-code>
  <template>
  I prefer <sonic-value dataProvider="value-example" key="preference"></sonic-value> 
  </template>
</sonic-code>
* If you have more complex data like this
<sonic-code>
  <template>
    <sonic-subscriber dataProvider="value-example-2" props='{"my":{"complex":[{"data":"👋 Hi There"}]}}'></sonic-subscriber> 
  </template>
</sonic-code>
* You can target it with the dot syntax
<sonic-code>
  <template>
  <sonic-value dataProvider="value-example-2" key="my.complex.0.data"></sonic-value> 
  </template>
</sonic-code>