Check/uncheck checkbox when clicking on the label text

[scootergrisen]

In settings when I click a checkbox I can check/uncheck the checkmark as expected for that settings.

But when I click the label next to the checkbox nothing happens.

I would like the checkbox to also be checked/unchecked when I click the label text.

I tried adding for="show-login" to the label element but that didn't seem to work.

stk-code/data/gui/screens/options/options_general.stkgui

Lines 40 to 44 in b180a49

	<div layout="horizontal-row" width="100%" height="fit">
	<checkbox id="show-login"/>
	<spacer width="1%" height="100%" />
	<label height="100%" I18N="In the general settings" text="Always show login screen" word_wrap="true"/>
	</div>

[CodingJellyfish]

Should be very useful for touchscreens

[Alayan-stk-2]

It may make sense for touch screens, but for mouse navigation it wouldn't be so great.

The general rule of thumb is:

• If it looks clickable, it should be clickable
• If it doesn't look clickable, it shouldn't be clickable. Many people do idle clicks on non-clickable areas without the intention of inputting a command. Yes, it's not a hard and fast rule, checkboxes on the web usually prioritize making the clickable area larger, but that's still suboptimal.

This issue can be sidestep by having wide boxes to be selected that each represent one of the options. For example label - yes / no ; with the label not being clickable but the yes / no boxes being a lot bigger than current checkboxes.

This can also work to replace spinners with few options, as three or four boxes could reasonably be fitted, and allowing to see all the options without having to manually go through them, which would be useful e.g. for the minimap or camera spinners.

[pedropaulosuzuki]

It may make sense for touch screens, but for mouse navigation it wouldn't be so great.

The general rule of thumb is:

* If it looks clickable, it should be clickable

* If it doesn't look clickable, it shouldn't be clickable. Many people do idle clicks on non-clickable areas without the intention of inputting a command. Yes, it's not a hard and fast rule, checkboxes on the web usually prioritize making the clickable area larger, but that's still suboptimal.

This issue can be sidestep by having wide boxes to be selected that each represent one of the options. For example label - yes / no ; with the label not being clickable but the yes / no boxes being a lot bigger than current checkboxes.

This can also work to replace spinners with few options, as three or four boxes could reasonably be fitted, and allowing to see all the options without having to manually go through them, which would be useful e.g. for the minimap or camera spinners.

On the web, we use labels with the "for" attribute all the time (which make clicking the labels the same as clicking the checkboxes, improving the user experience). Maybe a toggle switch could be a better design (debatable, probably not).

[deveee]

It wouldn't hurt for sure. At least for #ifdef MOBILE.

And I like other recent @scootergrisen suggestions too.

[qwertychouskie]

Clicking the text next to a checkbox to control the checkbox is a pretty standard UI paradigm, even on desktop. I think Windows has historically done this for all its checkboxes.

[mayrinck]

Hi guys! It's a known convention that if there's a checkbox and a label, both should execute the action of check/uncheck that option. From an accessibility standpoint, the larger the clickable area of an element, the easier it is for users with mobility impairments to interact with options [if we consider mouse usage]. Separating checkboxes from their labels goes against best practices and can make navigation more challenging.