search

Wikiki / bulma-checkradio

Bulma's extension to display better checkbox and radio imputs
MIT License
71 stars 43 forks source link

Checkbox, labels and IDs #75

Open noraj opened 2 years ago

noraj commented 2 years ago

I'm using the last version (2.1.3) and I'm having two major issues:

  1. Like for #5, checkboxes without a label are hidden. Yes a workaround is to add empty label, but those are taking extra space. Until cheboxes without labels can exist, how do I remove all size from the label?
  2. If the checkbox doesn't have an id and the label doesn't have a for attribute the checkbox is not clickable. I don't want to create id, it would be ok for a "remember me" on an auth form but when you'll have dozens of checkbox and that checkboxes are added dynamically you don't want to use IDs.

image

As far as I looked, it seems that this extension is not styling the checkboxes, but rather hiding them, attaching a label to them and styling the label instead to give it the appearance of a checkbox.

By reading this article https://moderncss.dev/pure-css-custom-checkbox-style/ I understand that's it's impossible to style native checkbox so it's impossible to do it without a label. So I guess the workaround to the two issues are:

  1. Find a way to not have extra space (maybe using an extra class) when someone want to use blank/empty labels.
  2. As in moderncss, have the ability to use parent label so there is no need for IDs even with pure CSS.

Also maybe supporting an addons-like style and list of checkbox like Bulma does for buttons (https://bulma.io/documentation/elements/button/#button-addons) would help.