Radio Button Hitbox

[dillasyx]

So I used the radio button in Vue 3 with Bootstrap.
When I use the class col on the element, the radio button gets stretched a lot.

As you can see, there is a big purple flex space on the right.

The problem is, if you hover over the purple part, it triggers the :hover css, but you can't click there to select the radio button.
You have to hit exactly the circle or the text in order to select it, even if the :hover property is triggered.
And also the cursor becomes a pointer due to the radio-button class, even when not the whole thing is clickable.

And that's how we placed the Buttons:

<div class="row m-1">
  <div class="col">
    <scale-radio-button label="BtnA" :checked="!BtnA" :value="false" @scale-change="func()"></scale-radio-button>
  </div>
  <div class="col">
    <scale-radio-button label="BtnB" :checked="BtnA" :value="true" @scale-change="func()"></scale-radio-button>
  </div>
</div>

[nowseemee]

Hi @dillasyx, thanks for opening this issue. We will investigate and come back to you.

[nowseemee]

Hi @dillasyx, this should be fixed in the latest release: 3.0.0-beta.40. Thanks again for opening this issue.