Checkbox design

[hacker]

Hi,

Can I change the checkbox design (shadow, color, etc…) with css?

Thanks in advance

Also, the more context you provide with your questions (screenshots, link to an open app, etc.), the more likely you’ll get good help quickly

[chaostorm]

@hacker Bubble’s default checkbox is pretty ugly, so I suggest you build your own. It’s pretty easy - here are the steps.

Create two elements:

1. A checkbox (use a regular group styled to your liking);
2. A text label (the text that explains what the checkbox does).

In the inspector, create a custom yes/no state for the checkbox group called checked and set its default to “no”. Then, create a conditional that replaces the background of the checkbox group with an image of a checkmark you like, as seen in the screenshot below. (Use an SVG file for best results - they are fast to load and do not pixelate when zoomed in.)

Now, group the checkbox and the label together in a wrapper group. Generally speaking, UX is much better when the user doesn’t have to fish for the checkbox on the screen and can just click a label instead and get the box checked/unchecked that way, but you still want to support the traditionalists who insist on clicking the box itself as well.

Next step is creating a new workflow for the the wrapper group like this:

Finally, make another workflow for the other use case—i.e. when the checkbox’s custom state is “yes”—and you are good to go!

Here’s a real-life example of a checkbox that uses this approach in a commercial app I built.

[cmarchan]

Another alternative method is to conditionally use box and check icons.

Show the box for unchecked … and conditionally show the checkmark for checked

[hacker]

Thanks,

I agree, it´s pretty ugly.

I really want a solution like this one because I have a lot of checkboxes and it´s easier and faster that way.

[hacker]

Ohh, thanks.
Didn´t know that.

The thing is that I am using my own icons, so this ones are not really an option for me.