Buttons communicate an action a user can take. They are typically placed throughout your UI, in places like dialogs, forms, cards, and toolbars.

Demos

Basic Usage

<mdc-radio> is a web component. All we need to do is put the required script into your HTML document. Follow <mdc-radio>'s html structure and everything will be all set.

Required Script

<script async
        src="https://your-domain/pack-mdc-radio.js">        
</script>

Structure

Put input[type=radio] inside <mdc-radio> as its child.

<mdc-radio>
  <input type="radio"
         name="mdc-radio"
         value="mdc-radio-value" />
</mdc-radio>

JavaScript Instantiation

<mdc-radio> could also use JavaScript to create DOM element. Here comes some examples.

<script>
  var nodeAPI, nodeClasses;

  //use DOM api
  nodeAPI = document.createElement('mdc-radio');
  document.body.appendChild(nodeAPI);
  nodeAPI.name = 'YourName';
  nodeAPI.value = 'YourValue';

  //new Classes
  nodeClasses = new MdcRadio();
  document.body.appendChild(nodeClasses);
  nodeClasses.name = 'YourName';
  nodeClasses.value = 'YourValue';  
</script>

Style Customization

<mdc-radio> use CSS variables to style its interface. That means developer could easy change them into the lookup you like.

<style>
mdc-radio {
  --theme-color: #6200ee;
  --ripple-color: rgba(98,0,238,.2);
  --mdc-radio-border-color: rgba(0,0,0,.54);
}
</style>

Variants

<mdc-radio> supports some common state to let it become more convenience & useful.

Checked

Note that mdc-radio[checked] will trigger <mdc-radio> into checked state.

<mdc-radio checked>
  <input type="radio"
         name="mdc-radio"
         value="mdc-radio-value" />
</mdc-radio>

Disabled

Note that mdc-radio[disabled] is prevent hover / click / focus states from activating. (FormData will lost the input value when disabled attribute added.)

<mdc-radio disabled>
  <input type="radio"
         name="mdc-radio"
         value="mdc-radio-value" />
</mdc-radio>

Properties