jQuery Mobile - Basic Radio Mini size Widget

Description

In fieldset element, include attribute data-mini = "true" for creating a mini version. It is useful in toolbars and tight spaces for more compact version.

Example

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

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>

   <body>
      <form>
         <h2>Radio Mini Size Example</h2>
         <fieldset data-role = "controlgroup" data-mini = "true">
            <input type = "radio" id = "radio1" name = "radio-choice-0" />
            <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>
         </fieldset>
      </form>
   </body>
</html>

Output

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

Save the above html code as radio_mini.html file in your server root folder.
Open this HTML file as http://localhost/radio_mini.html and the following output will be displayed.

jquery_mobile_widgets.htm

Kickstart Your Career

Get certified by completing the course

Get Started