How do I change the toggle widget into a button?

How can I change the toggle widget into a button?

Currently it looks like this with a checkbox:

But I want it to be a button. So it looks something like this when you click it and it is “on” and looks like this when “off”

Is this possible?

I probably could have achieved it using pure CSS, but because you have positioned the input inside the label instead of outside the label I don’t think that can be done.

Using this CSS:

label { background-color:#333; color:#FFF; }

input[type="checkbox"]:checked + label {
    background: brown;

This would have worked:

<input type="checkbox">
     my checkbox text

But this is the structure of the HTML your toggle widget is using, and therefore cannot be converted into a CSS button:

     <input type="checkbox">my checkbox text

See here:

Any ideas?

Can I change the HTML structure of the widget somehow?

Talking to my self here haha, but I figured it out.

Here is the CSS code if anyone has the same problem, obviously change to style as you want:

.ais-toggle–item__active {
background-color: #eee;
.ais-toggle–checkbox {
display: none;
.ais-toggle–item {
border: 1px solid red;
text-align: center;
border-radius: 5px;

1 Like

Hey @thecashbag,

You should be able to change the DOM completely as you like with the connectToggle. there’s an example on how to use it at the bottom of the page. I’m sure this will save you some CSS headaches