Checkbox and Radio Button

Checkbox and Radio Button components shows selectable items:

Checkbox

Photo of Checkbox in Tizen

Radio Button


Photo of Radio Button in Tizen

Table of Contents

  1. HTML Examples
    1. How to use Checkbox
    2. How to use Radio button
  2. Using checkbox/radio in Listview

HTML Examples

How to use Checkbox

The checkbox component shows on the screen a list of options where 1 or more can be selected. To add a checkbox component to the application, use the following code:

<input type="checkbox" name="mycheck" id="check-test" checked="checked"/>
<label for="check-test">Checkbox</label>

How to use Radio button

The radio button component shows a list of options on the screen where only 1 option can be selected. To add a radio button component to the application, use the following code:

<input type="radio" name="radioset" id="radio-1"/>
<label for="radio-1">Radio</label>

Using checkbox/radio in Listview

To add a checkbox or radio button to a list, use the following code:

<ul class="ui-listview">
   <li class="li-has-radio">
      <label>
         Radio checked
         <input type="radio" name="radioset" checked="checked"/>
      </label>
   </li>
   <li class="li-has-radio">
      <label>
         Radio button
         <input type="radio" name="radioset"/>
      </label>
   </li>
      </label>
   </li>
   <li class="li-has-radio disabled">
      <label>
         Radio disabled
         <input type="radio" name="radioset" disabled="disabled"/>
      </label>
   </li>
</ul>

Use the following code in the style.css file of your application to support a wide label tap area:

.ui-listview li input[type="checkbox"]:not(.ui-switch-input),
.ui-listview li input[type="radio"]
{
   position: absolute;
   right: 30px;
   top: 0px;
   margin-top: 25px;
}
.ui-listview li.li-has-checkbox label,
.ui-listview li.li-has-radio label
{
   display: block;
   padding: 31.5px 94px 31.5px 40px;
   margin: -30px -8px -21px -38px;
}