Radio

cc-radio allows users to select a single option from a list of options. It is supposed to be used with a cc-radio-group. Only one radio button in a given group can be selected at the same time.

<cc-radio-group label="Preferred contact method" name="contact">
  <cc-radio label="Email" value="email" checked></cc-radio>
  <cc-radio label="Phone" value="phone"></cc-radio>
  <cc-radio label="Mail" value="mail"></cc-radio>
</cc-radio-group>

Examples

Accessibility & Keyboard Interactions

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role#keyboard_interactions

• Tab + Shift: Move focus into and out of the radio group. When focus moves into a radio group, and a radio button is already checked, focus is set on the checked button. If none of the radio buttons are checked, focus is set on the first radio button in the group.

• Space: Checks the radio if not already checked. Unchecks a previously checked radio button in the radio group.

• Right Arrow and Down Arrow: Move focus to and checks the next radio button in the group, unchecking the previously focused radio button. If focus is on the last radio button, focus moves to the first radio button.

• Left Arrow and Up Arrow: Move focus to and checks the previous radio button in the group, unchecking the previously focused radio button. If focus is on the first radio button, focus moves to the last radio button.

Value

When a form is submitted, only radio groups which currently have checked radio button are submitted to the server, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default.

<form id="cc-radio-form">
  <cc-radio-group label="Preferred contact method" name="contact">
    <cc-radio label="Email" value="email" checked></cc-radio>
    <cc-radio label="Phone" value="phone"></cc-radio>
    <cc-radio label="Mail" value="mail"></cc-radio>
  </cc-radio-group>
  <br />
  <cc-button type="submit">Submit</cc-button>
</form>
<output></output>
<script>
  document.querySelector('#cc-radio-form').addEventListener('submit', function (event) {
    event.preventDefault();
    this.nextElementSibling.textContent = 'contact='+new FormData(this).get('contact');
  });
</script>

Sizes

Use the size attribute to change a cc-checkbox’s size.

<cc-radio size="small" label="Email" value="email" checked></cc-radio>
<!-- default to medium -->
<cc-radio size="medium "label="Phone" value="phone"></cc-radio>
<cc-radio size="large" label="Mail" value="mail"></cc-radio>

Custom Size

Change font size to get a custom size.

<cc-radio style="font-size: 2rem;" label="Email" value="email"></cc-radio>

Orientation

<cc-radio-group label="Preferred contact method" theme="vertical" name="contact">
  <cc-radio label="Email" value="email" checkec></cc-radio>
  <cc-radio label="Phone" value="phone"></cc-radio>
  <cc-radio label="Mail" value="mail"></cc-radio>
</cc-radio-group>
<br />
<cc-radio-group label="Preferred contact method" theme="horizontal" name="contact">
  <cc-radio label="Email" value="email" checked></cc-radio>
  <cc-radio label="Phone" value="phone"></cc-radio>
  <cc-radio label="Mail" value="mail"></cc-radio>
</cc-radio-group>

Disabled

<cc-radio-group label="Preferred contact method" theme="vertical" name="contact" disabled>
  <cc-radio label="Email" value="email"></cc-radio>
  <cc-radio label="Phone" value="phone"></cc-radio>
  <cc-radio label="Mail" value="mail"></cc-radio>
</cc-radio-group>

Events

Change

The change event is fired When a cc-radio element is checked (but not when unchecked).

<cc-radio-group 
  label="Preferred contact method" 
  theme="vertical" 
  name="contact" 
  onchange="alert(this.value)"
>
  <cc-radio label="Email" value="email" checked></cc-radio>
  <cc-radio label="Phone" value="phone"></cc-radio>
  <cc-radio label="Mail" value="mail"></cc-radio>
</cc-radio-group>