Make radio and checkbox labels inline blocks #634
Conversation
Make radio and checkbox inline blocks so that the effective click area only extends to the label. Without this change, the labels extend to the full width of the container which means the clicks apparently in space on the right hand side activate the inputs. Fixes #543
|
This looks good, but I'm questioning if this is actually a bug. One argument is that the before would make it easier to click an option on a mobile device? |
|
Fair comment… this might be one for @dashouse @timpaul or @joelanman? I thought there might be issues with accidentally triggering whilst scrolling but from testing at least on iPhone this doesn't seem to be an issue. One consideration is if we implement hover states for radio buttons and checkboxes then moving the mouse down the right hand side of the screen would trigger the hover state, which may be distracting for some users. |
|
I think on larger screen sizes its definitely a bug - you can trigger a radio button with a seemingly unrelated click. Also it's not how Elements works, so it's a change we'd need to do consciously. On smaller screens it could possibly be ok, but I wonder if it's worth adding the complexity of it being different at different screen sizes for something that may or may not be helpful. I'd say no. In user research the large majority of people try to click/tap the circle, which is why we made it really big. |
|
|
|
@NickColley if you're happy with this can you approve it? |
Make radio and checkbox inline blocks so that the effective click area only extends to the label. Without this change, the labels extend to the full width of the container which means the clicks apparently in space on the right hand side activate the inputs.
Before
After
Testing
Tested in:
Fixes #543