[philo23]

> However, wouldn't putting the input inside of the label (before the label text) be a better solution

The one potential downside to doing it the way you describe is (assuming the same CSS flexbox layout) now all the white space on the right side of the label acts the same as clicking the radio/checkbox. Which is almost like the opposite problem to the original issue.

This might actually be a good thing for some designs/contexts, but not always. For example, on mobile it might lead to miss-clicks while trying to scroll past the <label>s

[bastawhiz]

That's only true if you let your labels be as wide as the parent container.

> on mobile it might lead to miss-clicks while trying to scroll past the <label>s

You can scroll on mobile by swiping over the text of a label itself without activating the input; this isn't generally a concern.

[philo23]

Well with the CSS in the post they would end up as wide as their parent. If you made it an inline flex box then yes, that wouldn’t be an issue.

> You can scroll on mobile by swiping over the text of a label itself without activating the input; this isn't generally a concern.

Generally speaking yes, but there’s still a chance of triggering it by touching the whitespace by mistake. Whereas if it wasn’t the full width it just wouldn’t be possible to begin with.