Checkboxes and Radios styled as buttons - need differentiation between them?

Question

I am using Bootstrap's button groups to present checkboxes and radio buttons in the form of a button group. You can see an example of this functionality here: https://ng-bootstrap.github.io/#/components/buttons/examples

Here is a screenshot of what is on that site (top is a checkbox, bottom is a radio):

As you see, there is no difference between the two, the user will not know when they click on the button if it is going to allow multiple selections or not.

My question is, is this okay? Should I add some more styling to create a difference between them?

One idea I had was to add a circle and square to the radio and checkbox respectively before the button text so it is obvious what it is, but the program manager instantly hated the circle on the radio ones which leaves me to having the radio buttons be just the text, and checkboxes have a square with a checkmark next to the text.

Is this a good idea? Below is an image of what I have right now. I personally thought there should be a difference between them, and right now I'm at a loss as to how to do that best.

Answer 1

I believe it is important to provide the user with a visual hint towards how the controls will behave. I understand that you're going for "sleek", but would argue (and always do) that "easily understandable" is more important.

I think that for your checkbox/button control, this might be problematic. Especially so, when you get into "all checked" or "none checked" statuses, it won't be easily recognizable:

So I would consider adding a visual hint at radio vs checkbox behaviour (worst case scenario, you can say "select one" or "select multiple"), but I would also re-think your visuals, at least for the multiple choice control.

JQueryUI has these, which are not very sexy, but I think if you find a balance between this, and your extremely minimal solution, you might just hit the sweet spot:

Answer 2

The problem here is really about the microcopy/description of usage and a bit of tweak to the design(Distinguish Options from one another)

Answer 3

In context with supporting text (e.g. select all that apply) may help the user to better understand action. As for styling, it's a matter of preference. But it should clearly visually indicate a selected item from unselected as is shown in example provided in question (i.e. darker blue for selected).