Synergy makes working with form data a breeze by automagically binding named form controls to properties of the same name on your model.


  color: '#4287f5';


<input name="color" type="color" />


Attribute a name to your <select> and the value of the bound property will reflect that of the currently selected <option>


  pets: 'hamster';


<label for="pet-select">Choose a pet:</label>
<select name="pets" id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>

The standard HTML <select> element also supports the ability to select multiple options, using the multiple attribute:

<select name="pets" id="pet-select" multiple></select>

A <select> with [multiple] binds to an Array on your data:

  pets: ['hamster', 'spider'];

Radio Buttons

Add a name to each radio button to indicate which group it belongs to.

<input type="radio" name="filter" value="all" id="filter.all" />
<input type="radio" name="filter" value="active" id="" />
<input type="radio" name="filter" value="complete" id="filter.complete" />

As with <select>, the value of the named property will reflect the value of the selected <input type="radio">.

  filter: 'active';