Authors:Becky Gibson, Doug Hays, Nikolai Onken

RadioButton widgets capture binary user-choices unlike buttons which normally perform some action when clicked.


Normally, there are multiple RadioButton widgets assigned to a single group defined by widgets sharing the same name attribute. Upon FORM submission, the 1 checked RadioButton value is submitted using this shared name.

Note: To use the RadioButton widget, you currently have to call dojo.require(“dijit.form.CheckBox”)


Programmatic and declarative example

Let’s create 2 RadioButton widgets, 1 programmatically and 1 declaratively. We’ll wrap both inside a FORM to illustrate what happens on submit.


  var radioOne = new dijit.form.RadioButton({
    checked: true,
    value: "tea",
    name: "drink",
  }, "radioOne");
<form id="myform">
    <input type="radio" name="drink" id="radioOne" checked value="tea"/> <label for="radioOne">Tea</label> <br />
    <input type="radio" data-dojo-type="dijit.form.RadioButton" name="drink" id="radioTwo" value="coffee"/> <label for="radioTwo">Coffee</label> <br />
<button onclick="with(dojo.byId('myform'))with(elements[0])with(elements[checked?0:1])alert(name+'='+value);return false">Show form submit value</button>



Action Key
Toggle checked state Spacebar
Focus previous radio button up or left arrow
Focus next radio button down or right arrow

Note: Using the TAB key to focus a radio group will only focus the selected RadioButton in a group.

Radio buttons are implemented using the standard input type=checkbox and type=radio elements respectively. CSS is used to overlay the unique theme over the actual input elements. Thus, the keyboard behavior of checkboxes and radio buttons mimics the behavior in the browser.

Error in the documentation? Can’t find what you are looking for? Let us know!