@rei-co-op/cedar-radio v0.0.8

NOTE: v-model is required.

Events

Examples

Standard checkbox

v-model can be anything and is shared to all of the radios in the group.

var model = '';

<div>
  <cdr-radio name="example" value="a1" v-model="model">A1</cdr-radio>
  <cdr-radio name="example" value="a2" v-model="model">A2</cdr-radio>
  <cdr-radio name="example" :value="{val:'a3'}" v-model="model">A3</cdr-radio>
  <p>Group A Picked: {{model}}</p>
</div>

Preselected

v-model is preset to one of the values in the group.

var model2 = 'a2';

<div>
  <cdr-radio name="example2" value="a1" v-model="model2">A1</cdr-radio>
  <cdr-radio name="example2" value="a2" v-model="model2">A2</cdr-radio>
  <cdr-radio name="example2" :value="{val:'a3'}" v-model="model2">A3</cdr-radio>
  <p>Group A Picked: {{model2}}</p>
</div>

Event

Open the console to see output.

var model3 = '';

function eventExample(val) {
  console.log(val + ' was selected');
}

<div>
  <cdr-radio @change="eventExample" name="example3" value="a1" v-model="model3">A1</cdr-radio>
  <cdr-radio @change="eventExample" name="example3" value="a2" v-model="model3">A2</cdr-radio>
  <cdr-radio @change="eventExample" name="example3" :value="{val:'a3'}" v-model="model3">A3</cdr-radio>
  <p>Group A Picked: {{model3}}</p>
</div>