Checkbox and Radio Button

Checkbox and Radio Button components shows selectable items:

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">
            Radio checked
            <input type="radio" name="radioset" checked="checked" />
      <li class="li-has-radio">
            Radio button
            <input type="radio" name="radioset" />
      <li class="li-has-radio disabled">
            Radio disabled
            <input type="radio" name="radioset" disabled="disabled"/>

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 label, 
.ui-listview label
   display: block;
   padding: 31.5px 94px 31.5px 40px;
   margin: -30px -8px -21px -38px;

Where to Go Next