Polymer - Paper Radio Button

Paper-radio buttons are input buttons used to check or uncheck. Only one radio button in the group can be checked at any time, when the radio buttons are placed in the same radio group. To get paper-radio button in your directory in working condition, you should run the following command in the command prompt.

bower install --save PolymerElements/paper-radio-button

Example

Your index.html file should look like the following.

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>    
      <my-app></my-app>
   </body>
</html>

Your my-app.html file should look like the following.

<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-radio-button/paper-radio-button.html">
<dom-module id = 'my-app'>
   <template>
      <style>
         paper-progress {
            display: block;
            width: 30%;
            margin: 20px 0;
         }
      </style>
      
      <h3>Paper-Radio-Button Example</h3>
      <paper-radio-button>TutorialsPoint</paper-radio-button>     
      <paper-radio-button disabled>TutorialsPoint Disabled</paper-radio-button>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app', ready: function() {
            this.async(function() {         
            });
         }
      });
   </script>
</dom-module>

Output

Refresh the Polymer server and following will be the output.

polymer_elements.htm

Print Page