[whatwg] Add <input> "Switch" Type

Mikko Rantalainen mikko.rantalainen at peda.net
Tue Nov 19 01:04:34 PST 2013


Brian M. Blakely, 2013-09-21 02:03 (Europe/Helsinki):
> I was contemplating whether to propose a new input type, or an
> attribute valid only for checkboxes. But it isn't a checkbox, so I
> went with a new type value.  You can choose to slide the switch or
> click it in most OS implementations, so even the behavior is
> different from a checkbox.

I agree that the look and feel is different from checkbox but all the 
differences seem to be purely presentational. If you disagree, you need 
to elaborate a bit more.

I'd suggest pursuing something along the lines

input[type="checkbox"].switch
{
	appearance: lightswitch;
}

instead. That way you could use CSS media queries and use "lightswitch" 
appearance for narrow viewports and regular checkboxes for wider viewports.

However, if you're requesting for more featured switch seen in e.g. 
newer Android applications where the switch has embedded text labels to 
declare the switch positions, there might be need for a new markup.

An example of such UI in ASCII graphics:

+----+---------------+
| °C |========== °F =| Temperature unit
+----+---------------+

(That is, a label "Temperature unit" with a switch with labels "degree 
Celcius" and "degree Fahrenheit". In the real UI the label is on the 
left and switch is aligned to right margin but I put it this way to have 
a slightly better change for ASCII graphics to work correctly.)

I personally hate this UI and would much prefer using two radio buttons 
for this. Still, this is a native UI concept on this platform and I see 
no reasonable way to convert a real HTML radio button group into this 
using just CSS. The closest thing is allowing to allow rendering a 
<select> element with just options with a "lightswitch" appearance.

-- 
Mikko


More information about the whatwg mailing list