[Radio] onClick event target has wrong type

[michele-menegatti]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/tsnr9qpf?file=src%2FDemo.tsx
2. Check the console

Current behavior

The event of Radio onClick is typed as MouseEvent<HTMLButtonElement, MouseEvent>, but the target seems to always be an HTMLInputElement as you can see in the image below

This is a problem because HTMLButtonElement doesn't have the 'value' attribute, so you can't access the value set to the radio button. I think this is because Radio inherit ButtonBase props.

Expected behavior

onClick should be typed as MouseEvent<HTMLInputElement, MouseEvent>

Context

No response

Your environment

npx @mui/envinfo

System:
    OS: Linux 5.0 undefined
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  Browsers:
    Chrome: Not Found

Search keywords: radio, event, target, onclick

[ZeeshanTamboli]

The type React.MouseEvent<HTMLButtonElement> refers to the element the onClick is attached to — not the element that was actually clicked.

In this case, the click originates from the <input> which was actually clicked, and the event bubbles up to the parent (<span>, rendered by ButtonBase). That’s why event.target is the input, even though the handler is on the outer element.

This is standard browser behavior called event bubbling.

So the onClick type is technically correct. If you need to access the radio’s value, it's better to use the onChange handler, which is fired directly from the input.