Radio Ready

<duet-radio checked label="Checked" value="test"></duet-radio>

<script>
  // Select the above radio component
  var radio = document.querySelector("duet-radio")

  // Listen for change events in the radio
  radio.addEventListener("duetChange", function (e) {
    console.log("Change detected in radio", e.detail)
  })
</script>

<duet-radio label="Unchecked"></duet-radio>

<duet-radio checked disabled label="Disabled"></duet-radio>

<duet-radio value="test" name="foo">
  <span slot="label">Label with <strong>HTML</strong></span>
</duet-radio>

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

• label property is always required for accessible radio control.
• labelHidden property hides the above label visually, but still keeps it accessible for assistive technologies.
• You can use accessibleActiveDescendant property to indicates the id of a related component’s visually focused element.
• Use accessibleControls property to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component.
• Use accessibleOwns property to indicate the id of a component owned by the radio input.
• Use accessibleDescribedBy property to indicate the id of a component which contains descriptive/help text related to the radio input.
• disabled property makes the radio component disabled. This prevents users from being able to interact with the radio input, and conveys its inactive state to assistive technologies.
• role property can be used to define a specific role attribute for the radio input.