Radio Button

<ef-radio-button name="group" checked>Option A</ef-radio-button>
<ef-radio-button name="group">Option B</ef-radio-button>
<ef-radio-button name="group">Option C</ef-radio-button>
<ef-radio-button name="group" style="width: 60px; padding: 20px 0;">Fixed width</ef-radio-button>

ef-radio-button is a form control for selecting one option from many options within the same group.

Grouping radio buttons

More than one ef-radio-button can be grouped by setting the same value to the name attribute. Once an item in a group is checked, the user cannot uncheck a radio group unless the value is set through a property or attribute.

<ef-radio-button name="dairy" checked>Skimmed Milk</ef-radio-button>
<ef-radio-button name="dairy">Whole Milk</ef-radio-button>
<ef-radio-button name="dairy">Soya</ef-radio-button>

<ef-radio-button name="dairy" checked>Skimmed Milk</ef-radio-button>
<ef-radio-button name="dairy">Whole Milk</ef-radio-button>
<ef-radio-button name="dairy">Soya</ef-radio-button>

Disabled and readonly

ef-radio-button can be set to be disabled or readonly using the disabled or readonly attributes.

<ef-radio-button checked>Default</ef-radio-button>
<ef-radio-button disabled checked>Disabled</ef-radio-button>
<ef-radio-button readonly checked>Readonly</ef-radio-button>

<ef-radio-button checked>Default</ef-radio-button>
<ef-radio-button disabled checked>Disabled</ef-radio-button>
<ef-radio-button readonly>Readonly</ef-radio-button>

Events

checked-changed is the only event fired by ef-radio-button. It is dispatched whenever the state has been changed by user interaction, such as a click, tap or keyboard event.

<div id="container">
  <ef-radio-button name="dairy" checked>Skimmed</ef-radio-button>
  <ef-radio-button name="dairy">Whole</ef-radio-button>
  <ef-radio-button name="dairy">Soya</ef-radio-button>
  <div id="label"></div>
</div>

var label = document.getElementById('label');
var container = document.getElementById('container');
container.addEventListener('checked-changed', function(e) {
  if (e.target.checked) {
    label.textContent = '"I love ' + e.target.textContent + ' Milk!"';
  }
}, true);

#container {
  display: flex;
  align-items: center;
}

#label {
  margin-left: 30px;
  font-style: italic;
}

<div id="container">
  <ef-radio-button name="dairy" checked>Skimmed</ef-radio-button>
  <ef-radio-button name="dairy">Whole</ef-radio-button>
  <ef-radio-button name="dairy">Soya</ef-radio-button>
  <div id="label"></div>
</div>
<script>
var label = document.getElementById('label');
var container = document.getElementById('container');
container.addEventListener('checked-changed', function (e) {
  if (e.target.checked) {
    label.textContent = '"I love ' + e.target.textContent + ' Milk!"';
  }
}, true);
</script>