Skip to content

fix(#3607): update the interaction area to just around the checkbox or radio input and label#3642

Merged
chrisolsen merged 1 commit intodevfrom
mxsoco/3607-checkbox-radio-interaction-fix
Mar 24, 2026
Merged

fix(#3607): update the interaction area to just around the checkbox or radio input and label#3642
chrisolsen merged 1 commit intodevfrom
mxsoco/3607-checkbox-radio-interaction-fix

Conversation

@mxsoco
Copy link
Copy Markdown
Collaborator

@mxsoco mxsoco commented Mar 20, 2026

Before (the change)

  • Interaction area for checkbox or radio buttons exist beyond the label and input, where the user can click anywhere on the width of the checkbox or radio button.
image

After (the change)

  • Interaction now exists only on the label and input of checkbox or radio button.
image

Steps needed to test

  • Hover and interact over radio buttons and checkboxs and around it to see if they can toggle either button outside of the intended interaction area.

@bdfranck bdfranck linked an issue Mar 20, 2026 that may be closed by this pull request
Limit checkbox and radio interactive area to the control and label #3607
Closed
chrisolsen
chrisolsen reviewed Mar 23, 2026
View reviewed changes
Comment thread libs/web-components/src/components/checkbox/Checkbox.svelte
@Spark450 Spark450 added the P3 Priority 3 (nice to have): Valuable, but safe to release after launch. label Mar 23, 2026
bdfranck
bdfranck approved these changes Mar 23, 2026
View reviewed changes
Copy link
Copy Markdown
Collaborator

@bdfranck bdfranck left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested the changes...

  • ✅ v1 checkbox: The clickable regions are the length of the label content

Image

  • ✅ v1 radio: The clickable regions are the length of the label content

Image

  • ✅ v2 checkbox: The clickable regions are the length of the label content

Image

  • ✅ v2 radio: The clickable regions are the length of the label content

Image

Looks good to me! 👍

@Spark450 Spark450 requested a review from chrisolsen March 24, 2026 15:15
@chrisolsen chrisolsen force-pushed the mxsoco/3607-checkbox-radio-interaction-fix branch from ce07964 to c1cd073 Compare March 24, 2026 16:55
@chrisolsen chrisolsen merged commit e9e2866 into dev Mar 24, 2026
4 checks passed
@chrisolsen chrisolsen deleted the mxsoco/3607-checkbox-radio-interaction-fix branch March 24, 2026 16:57
@chrisolsen
Copy link
Copy Markdown
Collaborator

chrisolsen commented Mar 24, 2026

🎉 This PR is included in version 1.41.0-dev.26 🎉

The release is available on:

Your semantic-release bot 📦🚀

@chrisolsen
Copy link
Copy Markdown
Collaborator

chrisolsen commented Mar 25, 2026

🎉 This PR is included in version 6.11.0-dev.17 🎉

The release is available on:

Your semantic-release bot 📦🚀

@chrisolsen
Copy link
Copy Markdown
Collaborator

chrisolsen commented Mar 30, 2026

🎉 This PR is included in version 2.0.0-dev.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@chrisolsen
Copy link
Copy Markdown
Collaborator

chrisolsen commented Mar 30, 2026

🎉 This PR is included in version 5.0.0-dev.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@chrisolsen
Copy link
Copy Markdown
Collaborator

chrisolsen commented Mar 31, 2026

🎉 This PR is included in version 2.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@chrisolsen
Copy link
Copy Markdown
Collaborator

chrisolsen commented Mar 31, 2026

🎉 This PR is included in version 2.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@chrisolsen
Copy link
Copy Markdown
Collaborator

chrisolsen commented Mar 31, 2026

🎉 This PR is included in version 7.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@chrisolsen
Copy link
Copy Markdown
Collaborator

chrisolsen commented Mar 31, 2026

🎉 This PR is included in version 5.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@chrisolsen
Copy link
Copy Markdown
Collaborator

chrisolsen commented Mar 31, 2026

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@chrisolsen chrisolsen added the released Released into production. label Mar 31, 2026
@chrisolsen
Copy link
Copy Markdown
Collaborator

chrisolsen commented Apr 1, 2026

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@chrisolsen
Copy link
Copy Markdown
Collaborator

chrisolsen commented Apr 1, 2026

🎉 This PR is included in version 7.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@chrisolsen
Copy link
Copy Markdown
Collaborator

chrisolsen commented Apr 1, 2026

🎉 This PR is included in version 5.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@chrisolsen chrisolsen chrisolsen approved these changes

@bdfranck bdfranck bdfranck approved these changes

@Spark450 Spark450 Awaiting requested review from Spark450

Assignees

No one assigned

Labels

P3 Priority 3 (nice to have): Valuable, but safe to release after launch. released on @dev released on @next released Released into production.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Limit checkbox and radio interactive area to the control and label

4 participants

@mxsoco @chrisolsen @bdfranck @Spark450