3 State CSS Toggle Switch

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?

Solution

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="">&nbsp;</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)