Cool yes no toggle

Wappler General Need Help
1

We have been using this little toggle and our clients like it a lot.

very simple to use and fits in with a normal form.

First part add this to you CSS file

.btn-pre-sel {
    color: #cf8083 !important;
    background-color: #ffffff;
    border-color: #c2787b !important;
}
.btn-sel {
    color: #ffffff !important;
    background-color: #c2787b !important;
    border-color: #c2787b !important;
}

.w120px {width: 120px !important}

Code to drop into your file:

<p class="mt-2 mb-2"><b>Do you already have an account with us?</b></p>
<input type="hidden" id="account" value="no">
<div class="btn-group" role="group" aria-label="Button Group">
  <button id="btn_account_no" class="btn w120px btn-pre-sel" dmx-on:click="account.setValue('no')" dmx-class:btn-sel="account.value=='no'">No</button>
  <button id="btn_account_yes" class="btn w120px btn-pre-sel" dmx-on:click="account.setValue('yes')" dmx-class:btn-sel="account.value=='yes'">Yes</button>
</div>

yes-no-toggle

8 Likes
2

Very nice indeed!!! Thanks!! We had in the past carried out user testing on these toggles and lots of ‘real’ end users ran into trouble getting confused on what the active/end selection is that they selected. The more they clicked it, the more confused they got about whether it’s a “yes or no” in your example.

We found that even different contrast colours still created a confusion. We tried dimming the inactive state which helped a little in the success rate.

It’s interesting perception from a cognitive perspective.

3 Likes
3

I’ve produced similar using the bootstrap classes of btn-outline-primary and btn-primary.

4

Although it looks cool - it is now always clean what is the selected state. Is it the dark red or the white? Usually selected is highlighted so some people would expect the white to be the selected state… but in your case you probably mean the red state to be selected.

So you are actually introducing an extra cognitive load for people to be in doubt of what is really the selected state first.

So you might want to introduce an extra confirmation in the visual what is the selected state to make this crystal clear.

1 Like