Checkbox button

[ghost]

Hello,

is there a plan to add support for - only select one checkbox in group?
https://stackoverflow.com/questions/9709209/html-select-only-one-checkbox-in-a-group

Also what do you think about changing colors for active/hover btn checkbox? They are the same now and it's not easy to differentiate is checked or not on hover when clicking.

Thanks

[andresgalante]

Hi @pnxsaz
I don't understand your usecase:

"only select one checkbox in group?"

What you are describing is a radio input not a checkbox. That behaviour is build in HTML.

I don't think checkboxes have hover state. Sorry I must be completely lost with your usecase

[ghost]

Behaviour is similar as radio button but allows to unselect. There is an example at stackoverflow link. Component is https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons.

[patrickhlauke]

I can understand the "allow to have either none or only one selected" use case (only way to do this with radio buttons is to have a neutral extra radio button acting as the "none"). Not sure how clear it would be to users, unless it's made explicit with the label/legend for the group

[ghost]

Not with radio but with checkbox button. Here is one more example from stackoverflow http://jsfiddle.net/X597P/

[bkdotcom]

@pnxsaz that fiddle uses 3 lines of bootstrap compatible javascript to accomplish that.

real-world code would contain just a bit more code to limit the unselecting to the same checkbox group

[andresgalante]

Ok, I get it now the "allow to have either none or only one selected".

Thanks a lot for the clarification. Do you guys think this use case is common enough that it should belong in Bootstrap?

@pnxsaz To be honest I never had to deal with it that's why I might be biased, but I think this makes a perfect case for a bootstrap plugin project.

Your example seems to me the same as this:
https://codepen.io/andresgalante/pen/oGLrNW

None is selected, unless you select one, right? why would you use checkboxes for something that is a radio btn.

[ghost]

@andresgalante those are radio buttons, I meant checkbox. There is already button.js file/plugin which could be little bit changed and extended to add possible option.
Here is one more example.
Top radio button label is from B4.
Bottom checkbox button label is custom component which allows only one to be selected or none.

https://gyazo.com/52c7460f9aa954d9df6933bc2464c57b

[andresgalante]

Yeap I got it, you want to make checkboxes behave like radios.

My point is don't do it and this does not belong in bootstrap. Hacking HTML just because, is wrong.

[pat270]

You can make radio buttons look like checkboxes with custom forms, change .custom-radio to .custom-checkbox.

https://getbootstrap.com/docs/4.0/components/forms/#radios

[patrickhlauke]

@pat270 this isn't about the look, but behavior. anyway, it's marked as a feature request now. not sure if it's common enough to warrant inclusion into core bootstrap, leaving it up to the team/@mdo to decide (and then it'll need to be coded)

[ghost]

@andresgalante radio buttons will have one extra button to behave as non selected as you created the example. Checkbox buttons will not have that extra button. However the outcome is the same. There is similar discussion at stackoverflow link I provided in comment section in which I don't wish to go into 😉

Sometimes designers or developers wish to do something bit different. Is the number of views on that stackoverflow question relevant for this to be included I'm not sure. It's just a suggestion.

@bkdotcom just an example to try describing behaviour.

[alecpl]

Please, don't add this feature to Bootstrap.

[bkdotcom]

@alecpl agreed.
It's a huge UX anti-pattern.
For one thing, it'd make more sense to add special behavior to radio buttons that would allow the single selected radio to be unselected.
Should you "need" this behavior for your site, it can easily be implemented with 3 lines of javascript.

For a framework that agonizes whether or not to change the cursor on button hover, this doesn't belong.

[Herst]

How about using validation?

Think about the more generalized case where you have multiple options but only certain combinations are possible; if the number of combinations is low you could do radio buttons for each one of them but otherwise checkboxes with validation might be the only sensible way.

[sarbull]

This can be easily achieved with Angular Forms Validation. Somehow onChange set the other values to undefined from the array of options you have and that's it.

[ghost]

Will close this one as it seems to be too specific or confusing for user. Active/hover effect belong to different issue. Thanks for your feedback.