Is it possible to have a 3-way toggle?

Question

I'm trying to make a 3-way toggle, something like this, but in 3 phases. Obviously this can't be done using a checkbox, as that's a boolean value, so I was wondering whether it would be possible to simulate such a thing using 3 radio buttons? Would such a thing be possible? And if so, is this the correct way of going about this?

Javascript is fine, by the way.

So you want one button with 3 states (clicking 3 times on the same button) but only using CSS? — atmd, Jan 07 '15 at 11:35
@atmd So it would almost be a slider, but with only 3 states, left, middle and right. — dan, Jan 07 '15 at 11:37
possible duplicate of http://stackoverflow.com/questions/12516001/3-state-toggle-button — U r s u s, Jan 07 '15 at 11:38
possible duplicate of [Tri-state Check box in HTML?](http://stackoverflow.com/questions/1726096/tri-state-check-box-in-html) — FelipeAls, Jan 07 '15 at 14:09

score 3 · Answer 1 · answered Jan 07 '15 at 11:43

Note: As this has now been down voted, I figured I'd point out that I posted this answer before javascript was added to the question, so please treat this as a pure HTML solution and nothing more.

Radio buttons are exactly how you'd do this:

<label>State 1
  <input type="radio" name="radios" value="State 1" />
</label>
<label>State 2
  <input type="radio" name="radios" value="State 2" />
</label>
<label>State 3
  <input type="radio" name="radios" value="State 3" />
</label>

With this you have 3 states. In the above answer, the result is either State 1, State 2 or State 3.

score 2 · Accepted Answer · answered Jan 07 '15 at 11:45

I don't think it's possible to have a tri-state button, but if you want a slider-type thing without JavaScript as you commented, just use a range input:

$('input').change(function() {
    $('#res').html(this.value);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="range" min="0" max="2" step="1" value="0" />
<div>Debug value: <span id="res"></span></div>

Is it possible to have a 3-way toggle?

2 Answers2