material-radio

MD3 radio — 20dp ring, 48dp target, 40dp state-layer. Coordinated by material-radio-group (form-associated, ARIA radiogroup, arrow-key navigation).

vertical group horizontal leading label disabled item disabled group help text error RTL (arrow keys flipped) in a form
required, no default (native invalid → inline error)
Sample usage 
<!-- vertical (default) -->
<material-radio-group name="contact" value="email" label="Preferred contact">
  <material-radio value="email" label="Email"></material-radio>
  <material-radio value="phone" label="Phone"></material-radio>
</material-radio-group>

<!-- horizontal -->
<material-radio-group orientation="horizontal" value="m" label="Size">
  <material-radio value="s" label="S"></material-radio>
  <material-radio value="m" label="M"></material-radio>
  <material-radio value="l" label="L"></material-radio>
</material-radio-group>

<!-- error + helper text -->
<material-radio-group label="Required" required error error-text="Pick one">
  <material-radio value="y" label="Yes"></material-radio>
  <material-radio value="n" label="No"></material-radio>
</material-radio-group>

<!-- listen for changes -->
<script>
  document.querySelector('material-radio-group')
    .addEventListener('valueChange', e => console.log(e.detail.value));
</script>

Forced colors (Windows High Contrast)

forced-colors: active (DevTools ▸ Rendering ▸ Emulate CSS media feature forced-colors) swaps the ring/dot to system colors — CanvasText normally, GrayText disabled.