Radio

The Radio component changes theme of browser-default radio buttons to a form more adapted to the mobile environment.

Note
This component is supported since Tizen 2.4.
It was renamed from CheckboxRadio component of Tizen 2.3.

Table of Contents

  1. Default Selectors
  2. HTML Examples
  3. Methods

Default Selectors

By default, all <input> elements with the type="radio" or class="ui-radio"are displayed as radio button.

HTML Examples

To create a radio component, please refer following example:

<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked"/>
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2"/>
<label for="radio-choice-2">Dog</label>

Methods

Summary

Method Description 
disable()

Disables the component.

 
enable()

Enables the component.

 
value()

Set/Return a value from radio element.
disable

Disables the component.

disable()

Return value:

Type Description
Radio Returns Radio.

Code example:

 
<input type="radio" name="radio-1" id="radio-1"/>
<label for="radio-1">Normal</label>
<script>
   var element = document.getElementById("radio-1"),
       radioWidget = tau.widget.Radio(element);
   radioWidget.disable();
</script>
enable

Enables the component.

enable()

Return value:

Type Description
Radio Returns Radio.

Code example:

 
<input type="radio" name="radio-1" id="radio-1"/>
<label for="radio-1">Normal</label>
<script>
   var element = document.getElementById("radio-1"),
       radioWidget = tau.widget.Radio(element);
   radioWidget.enable();
</script>
value

Set/Return a value from radio element.

{string | number} value()

Return value:

Type Description
String | number When method do not have value parameter, it returns value of element.

Code example:

 
<input type="radio" name="radio-1" id="radio-1"/>
<label for="radio-1">Normal</label>
<script>
   var element = document.getElementById("radio-1"),
       radioWidget = tau.widget.Radio(element);

   /* Set value to radio element */
   radioWidget.value("radio-value");
   /* Return checked radio element */
   console.log(radioWidget.value());
</script>