I always do so because to me it feels nicer; it implies an action will happen on click. Especially for radio/checkbox labels, where the for
attribute is correctly used.
2 Answers
The pointer cursor is simply an indicator of "clickability" (affordance). There are numerous ways of indicating to the user that an element can be clicked on, and the pointer is just one of them.
The pointer is especially useful when the element being clicked on doesn't change on mouse over. Default link styles in a web-browser don't change when the mouse is hovered over them, so the pointer is necessary to indicate to the user that the element can be clicked on.
With <input type="checkbox">
and <input type="radio">
elements, the background color of the element changes to indicate that an action can take place.
I'm currently using Windows 7, and the icons on the desktop don't cause the pointer to change when hovered, instead the icon changes to indicate that it can be clicked on:
If you feel that additional cues would be helpful to inform the user of a possible interaction, there is no harm in changing the cursor to the appropriate type. For example, the "help" cursor is often used on <abbr>
elements to indicate additional information is available.
-
Interestingly/(depressingly?) bootstrap 5 have no default clickabilitly "affordance" for checkboxes and radios. No pointer cursor, no visual hover hints. Oct 18, 2022 at 20:57
Just today I thought about the same thing, and to me it just feels right to use pointer on checkboxes. "Nigel NormalUser" who isn't so into using software, doesn't see it obvious, that you can select the checkbox with the label. And having the pointer there when hovering could maybe make it more known for the common user. So I would say yes, it should. For usability and clearance to those who don't know that you can select by clicking on the label.
.checkbox
class around a containing div. But curiously, they don't addcursor: pointer
to the input itself! In fact, this css rule looks altogether superior.) I can't answer the why, I was kind of surprised to see that chrome hasn't added it to their user stylesheets. I think it looks better.label input { cursor: pointer; }
.