I have been looking around for a 3 state toggle switch but haven't had much luck.
Basically I need a switch that has the states: | ON | N/A | OFF |
The slider by default starts in the middle, and once the user slides to left or right, they can't go back to the N/A (not answered) state.
Anyone have any idea on how to handle this?
Try something like this:
.switch-toggle {
width: 10em;
}
.switch-toggle label:not(.disabled) {
cursor: pointer;
}
<link href="https://cdn.jsdelivr.net/css-toggle-switch/latest/toggle-switch.css" rel="stylesheet" />
<div class="switch-toggle switch-3 switch-candy">
<input id="on" name="state-d" type="radio" checked="" />
<label for="on" onclick="">ON</label>
<input id="na" name="state-d" type="radio" disabled checked="checked" />
<label for="na" class="disabled" onclick=""> </label>
<input id="off" name="state-d" type="radio" />
<label for="off" onclick="">OFF</label>
<a></a>
</div>
This will start with N/A
as the default option (via checked="checked"
), but make it unselectable later (by using disabled
)
JSFiddle Demo (Simplified)