Fork me on GitHub

Example: Basic radio field creation

How to create a radio field.

Basic RadioField creation

Use the following code to create a basic inputEx RadioField.

Differentiate choices' labels and values

Use the following code to create choices with labels different from values

Updated event

How to listen to the updated event :

Styling RadioField

Display the choices vertically, style currently selected choice...

Basic allowAny option

The "allowAny" option adds a radio associated to a StringField to let the user enter any value.

Advanced allowAny option

More options with allowAny (separators, default value, validator, etc.)

Advanced allowAny option 2

Use a custom field in allowAny

Disable RadioField

Disable the field (to disable radio inputs individually, see another example below)

addChoice

Add choices dynamically

removeChoice

Remove choices dynamically

Hide / Show / Disable / Enable choice

Hide, show, disable or enable an choice in the selector, without removing it totally, and keeping the original choice's order

Note : disableChoice and enableChoice methods have no effect with IE < 8 because it did not support disabled="disabled" attribute.

HTML

<div id="field-container"></div>

JavaScript

Implementation

YUI().use('inputex-radio', 'inputex-time', 'inputex-integer', 'inputex-timeinterval', function(Y) { 

   // Example 1

   new Y.inputEx.RadioField({
      label: 'Where did you learn about inputEx ?',
      name: 'example1',
      choices: [                    // choices: [       <- alternative syntax (shorter)
         { value: 'Ajaxian' },     //    'Ajaxian',    <-
         { value: 'YUI blog' },    //    'YUI blog',   <-
         { value: 'Other' }        //    'Other'       <-
      ],                            // ],               <-
      value:'Ajaxian',
      parentEl: 'container1'
   });
      
   // Example 2

   new Y.inputEx.RadioField({
      label: 'Where are you from ?',
      name: 'example2',
      choices: [                                                // no alternative syntax
         { value: 'us', label: 'United States of America' },
         { value: 'fr', label: 'France' }
      ],
      parentEl: 'container2'
   });

   // Example 3

   var element, field0, button0, val0, logDiv0;
   
   element = Y.one('#container3');
   field0 = new Y.inputEx.RadioField({ name: 'example3', label: 'Where are you from ?', choices: [{ value: 'us', label: 'United States of America' }, { value: 'fr', label: 'France' }], parentEl: element });
   
   button0 = Y.inputEx.cn('button', null, null, "SetValue with 'us'");
   element.appendChild(button0);
   
   val0 = 'us';
   
   Y.one(button0).on("click" ,function() {
      field0.setValue(val0);
      val0 = (val0 == 'fr') ? 'us' : 'fr';
      button0.innerHTML = "SetValue with '"+val0+"'";
   });
   
   logDiv0 = Y.inputEx.cn('div', null, null, "Log :");
   element.appendChild(logDiv0);
   
   field0.on('updated', function(value) {
      logDiv0.innerHTML += "Updated at "+(new Date())+" with value \""+value+"\"";
      logDiv0.appendChild(Y.inputEx.cn('br'));
   });
   
   
   // Example 4
   
   new Y.inputEx.RadioField({
      label: 'Where did you learn about inputEx ?',
      display:'vertically',  // instead of default implicit "display:'inline'"
      name: 'example4',
      choices: ['Ajaxian','YUI blog','Other'],
      parentEl: 'container4'
   });
   
   // + CSS : underline selected choice
   //
   // <style>
   //   .inputEx-RadioField .inputEx-selected label { text-decoration: underline; }
   // </style>
   
   
   // Example 5
   
   var field2 = new Y.inputEx.RadioField({label: 'Where did you learn about inputEx ?', name: 'example5', choices: ['Ajaxian','YUI blog'], parentEl: 'container5', allowAny: true});
   field2.on('updated', function(value) {
         Y.one('#container5').appendChild( Y.inputEx.cn('div',null,null, "Updated with value: \""+value+"\"") );
   });
   
   
   // Example 6
   
   var field6, element6, button61, button62, button63;
   
   element6 = Y.one('#container6');
   
   field6 = new Y.inputEx.RadioField({
      label: 'Would you like to receive an email reminder ?',
      name: 'example6',
      display: 'vertically',
      choices: [{ value: '0', label: 'No' }],
      value: '0', // default value, also used by clear() method
      parentEl: 'container6',
      allowAny: {
         separators:['Yes, ',' hours before the event'],
         value:'3', // default value for allowAny field6, not for radioField
         validator: function(val) {
            var num = parseInt(val,10);
            return (val === ""+num && num >= 1 && num <= 48);
         }
      },
      messages: {invalid:"Hours should be between 1 and 48."},
      showMsg:true,
      required:true
   });
   
   field6.on('updated', function(value) {
         element6.appendChild( Y.inputEx.cn('div',null,null, "Updated with value: \""+value+"\"") );
   });
   
   button61 = Y.inputEx.cn('button', null, null, 'setValue("6")');
   element6.appendChild(button61); 
   Y.one(button61).on('click', function() { field6.setValue("6"); });
   
   button62 = Y.inputEx.cn('button', null, null, 'getValue()');
   element6.appendChild(button62); 
   Y.one(button62).on('click', function() { alert(field6.getValue()); });
   
   button63 = Y.inputEx.cn('button', null, null, 'clear()');
   element6.appendChild(button63); 
   Y.one(button63).on('click', function() { field6.clear(); });
   
   /* Style
   #container6 div.inputEx-StringField-wrapper input {width: 25px;}
   */
   
   
   // Example 7


   var field7, element7;
   
   element7 = Y.one('#container7');
   
   field7 = new Y.inputEx.RadioField({
      label: 'Would you like to receive an email reminder ?',
      name: 'example6bis',
      display: 'vertically',
      choices: [{ value: 0, label: 'No' }, { value: 1440, label: 'Yes, 1 day before the event (recommended)'}],
      value: 1440, // default value, also used by clear() method
      parentEl: element7,
      allowAny: {
         field7: {
            type: "timeinterval",
            unit: Y.inputEx.TimeIntervalField.units.MINUTE, // return value in 'minutes'
            value: 7*24*60, // 1 week = 7 days,
            fields: [
               {type:'integer', value:1, required:true},
               {
                  type: 'select',
                  choices: [
                     { value: Y.inputEx.TimeIntervalField.units.HOUR, label: Y.Intl.get("inputex-timeinterval").timeUnits.HOUR },
                     { value: Y.inputEx.TimeIntervalField.units.DAY, label: Y.Intl.get("inputex-timeinterval").timeUnits.DAY },
                     { value: Y.inputEx.TimeIntervalField.units.MONTH, label: Y.Intl.get("inputex-timeinterval").timeUnits.MONTH }
                  ]
               }
            ],
            separators:['Yes, ',false, ' before the event']
         },
         validator: function(val) {
            return (val >= 120 && val <= 43200);
         }
      },
      required:true,
      messages: {invalid:"Reminder can be set between 2 hours and 1 month before the event"},
      showMsg:true
   });
   
   field7.on('updated', function(value) {
         element7.appendChild( Y.inputEx.cn('div',null,null, "Updated with value: "+value+" (minutes)") );
   });
   
   
   
   // Example 8
   

   var element8, field8, button81, button82;
   
   element8 = Y.one('#container8');
   field8 = new Y.inputEx.RadioField({label: 'Where did you learn about inputEx ?', name: 'example8', choices: ['Ajaxian','YUI blog','Other'], value:'Ajaxian', parentEl: element8});
   
   button81 = Y.inputEx.cn('button', null, null, 'disable()');
   element8.appendChild(button81); 
   Y.one(button81).on('click', function() { field8.disable(); });

   button82 = Y.inputEx.cn('button', null, null, 'enable()');
   element8.appendChild(button82); 
   Y.one(button82).on('click', function() { field8.enable(); });
   
   
   // Example 9
   

   var element9, field9, button91, button92, button93, logDiv9;
   
   element9 = Y.one('#container9');
   field9 = new Y.inputEx.RadioField({name: 'example9', choices: [{ value: 'United States of America' }, { value: 'France' }], parentEl: element9});
   
   button91 = Y.inputEx.cn('button', null, null, "Add 'Spain' choice (and select 'Spain')");
   Y.one(button91).on('click' ,function() {
      field9.addChoice({value:"Spain",selected:true});
      button91.disabled = true;
   });
   
   button92 = Y.inputEx.cn('button', null, null, "Add 'United Kingdom' choice (value : 'uk'), in position 1");
   Y.one(button92).on('click' ,function() {
      field9.addChoice({value:"uk",label:"United Kingdom",position:1});
      button92.disabled = true;
   });
   
   button93 = Y.inputEx.cn('button', null, null, "Add 'Sweden' choice after 'France' choice");
   Y.one(button93).on('click' ,function() {
      field9.addChoice({value:"Sweden",after:"France"});
      button93.disabled = true;
   });
   
   element9.appendChild(button91);
   element9.appendChild(button92);
   element9.appendChild(button93);
   
   logDiv9 = Y.inputEx.cn('div', null, null, "Log : ");
   element9.appendChild(logDiv9);
   
   field9.on('updated', function(value) {
      logDiv9.innerHTML += "Updated at "+(new Date())+" with value \""+value+"\"";
      logDiv9.appendChild(Y.inputEx.cn('br'));
   });
   
   
   // Example 10
   
   var element10, field10, button101, button102, button103, logDiv10;
   
   element10 = Y.one('#container10');
   field10 = new Y.inputEx.RadioField({
      name: 'example9',
      choices: [
         { value: 'usa', label: 'United States of America' },
         { value: 'de', label: 'Germany' },
         { value: 'uk', label: 'United Kingdom' },
         { value: 'fr', label: 'France' },
         { value: 'se', label: 'Sweden' },
         { value: 'es', label: 'Spain' }
      ],
      parentEl: element10
   });
   
   button101 = Y.inputEx.cn('button', null, null, "Remove 'Spain' choice (by label)");
   Y.one(button101).on('click', function() {
      field10.removeChoice({label:"Spain"});
      button101.disabled = true;
   });
   
   button102 = Y.inputEx.cn('button', null, null, "Remove 'United Kingdom' choice (by value)");
   Y.one(button102).on('click', function() {
      field10.removeChoice({value:"uk"});
      button102.disabled = true;
   });
   
   button103 = Y.inputEx.cn('button', null, null, "Remove 'Germany' choice (by position)");
   Y.one(button103).on('click', function() {
      field10.removeChoice({position:1});
      button103.disabled = true;
   });
   
   element10.appendChild(button101);
   element10.appendChild(button102);
   element10.appendChild(button103);
   
   logDiv10 = Y.inputEx.cn('div', null, null, "Log : ");
   element10.appendChild(logDiv10);
   
   field10.on('updated', function(value) {
      logDiv10.innerHTML += "Updated at "+(new Date())+" with value \""+value+"\"";
      logDiv10.appendChild(Y.inputEx.cn('br'));
   });
   
   

   // Example 11
   
   var element11, field11, button111, button112, button113, button114, logDiv11;
   
   element11 = Y.one('#container11');
   field11 = new Y.inputEx.RadioField({name: 'example11', choices: [ { value: 'usa', label: 'United States of America' }, { value: 'fr', label: 'France' }, { value: 'es', label: 'Spain' }], parentEl: element11});
   
   button111 = Y.inputEx.cn('button', null, null, "Hide choice 'France'"); element11.appendChild(button111);
   button112 = Y.inputEx.cn('button', null, null, "Show choice 'France'"); element11.appendChild(button112);
   button113 = Y.inputEx.cn('button', null, null, "Disable choice 'Spain'"); element11.appendChild(button113);
   button114 = Y.inputEx.cn('button', null, null, "Enable choice 'Spain'"); element11.appendChild(button114);
   
   logDiv11 = Y.inputEx.cn('div', null, null, "Log :");
   element11.appendChild(logDiv11);
   
   field11.on('updated', function(value) {
      logDiv11.innerHTML += "Updated at "+(new Date())+" with value \""+value+"\"";
      logDiv11.appendChild(Y.inputEx.cn('br'));
   });
   
   
   Y.one(button111).on('click' ,function() {
      
      field11.hideChoice({value:'fr'});
      
      logDiv11.innerHTML += "[INFO] Hide choice 'France' (current value : "+field11.getValue()+")";
      logDiv11.appendChild(Y.inputEx.cn('br'));
   });
   
   Y.one(button112).on('click' ,function() {
      
      field11.showChoice({value:'fr'});
      
      logDiv11.innerHTML += "[INFO] Show choice 'France' (current value : "+field11.getValue()+")";
      logDiv11.appendChild(Y.inputEx.cn('br'));
   });
   
   Y.one(button113).on('click' ,function() {
      
      field11.disableChoice({label:'Spain'});
      
      logDiv11.innerHTML += "[INFO] Disable choice 'Spain' (current value : "+field11.getValue()+")";
      logDiv11.appendChild(Y.inputEx.cn('br'));
   });
   
   Y.one(button114).on('click' ,function() {
      
      field11.enableChoice({label:'Spain'});
      
      logDiv11.innerHTML += "[INFO] Enable choice 'Spain' (current value : "+field11.getValue()+")";
      logDiv11.appendChild(Y.inputEx.cn('br'));
   });
   

});