JSFiddle - React, Tailwind, and code Playground

by vikikamath

HTML

<script type="text/ractive" id="radio">
	<label><input type='radio' on-focus="focused"  name='{{color}}' value='red' checked> Red</label>
	<label><input type='radio' on-focus="focused" name='{{color}}' value='green'> Green</label>
	<label><input type='radio' on-focus="focused" name='{{color}}' value='blue'> Blue</label>

	<p>The currently selected color is <span style='color: {{color}};'>{{color}}</span></p>
  
  {{#colors}}
  	<label>
    	<input type='checkbox' on-focus="focused" name='{{selected}}' value='{{.}}' />{{.}}
  	</label>
	{{/}}
  <p>Currently checked <span style='color: {{selected}};'>{{#if selected}}{{selected}}{{else}}'None'{{/if}}</span></p>
</script>
<div id="main">

</div>

JavaScript

ractive = new Ractive({
    el: "#main",
    template: "#radio",
    data: {
        colors: ['Red', 'Yellow', 'Green', 'Blue']
    }
});

ractive.on('focused', function(e){
		console.log("focus", e);
})


ractive.on('change', function(e){
		console.log("change", e);
})