jQuery Mobile - Radio Vertical group Widget


Multiple radio buttons are integrated in the group by setting the data-role = "controlgroup" attribute in the fieldset. Automatically, the framework will set the corners round at the bottom and top corner, and remove all margins. By default, the radio is set vertically.


Following example demonstrates the use of radio button vertically in the jQuery Mobile.

<!DOCTYPE html>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

         <h2>Radio Vertical Group Example</h2>
         <fieldset data-role = "controlgroup">
            <input type = "radio" id = "radio1" name = "radio-choice-0" checked = "checked" />
            <label for = "radio1">Radio 1</label>

            <input type = "radio" id = "radio2" name = "radio-choice-0" />
            <label for = "radio2">Radio 2</label>

            <input type = "radio" id = "radio3" name = "radio-choice-0" />
            <label for = "radio3">Radio 3</label>


Let's carry out the following steps to see how the above code works −

  • Save the above html code as radio_vertical_group.html file in your server root folder.

  • Open this HTML file as http://localhost/radio_vertical_group.html and the following output will be displayed.

Kickstart Your Career

Get certified by completing the course

Get Started