[whatwg] Add <input> "Switch" Type

Qebui Nehebkau qebui.nehebkau+whatwg at gmail.com
Tue Nov 19 12:27:45 PST 2013

On 19 November 2013 19.13.44, Jukka K. Korpela wrote:
> From the usability and accessibility point of view, this seems to
> address an important issue. Authors sometimes use checkboxes (or radio
> buttons) so that changing their state has an immediate effect, even
> submitting a form. This may violate normal user expectations and can
> be confusing. Normally, we enter some data, using various controls,
> and then click on a button (or do something equivalent) to request for
> an action. Checking a checkbox should not be a commitment, any more
> than typing text in a feedback form or selecting an item from a
> dropdown list in an order form should be a commitment.
> This means that things that have immediate effect should be buttons,
> or something else recognized as action-triggering  control. So why not
> use a button? Maybe because a button does not normally have a visible
> state. A toggle switch would thus logically be a combination of a
> checkbox and a button: it has a direct effect, like a button, but it
> remains visible (or otherwise perceivable) in an on or off state, like
> a checkbox. And it should probably have a dual ARIA role:
> role="checkbox button".
> But maybe this means looking at things in a too narrow perspective, as
> if controls were only used in forms that submit data to a server. A
> purely application-like page may conceivably have checkboxes and radio
> buttons that have immediate effects (say, so that in an image
> processing application, checking a checkbox immediately turns the
> image to grayscale). Checkboxes probably wouldn’t confuse a user who
> knows at all what he is using. On the other hand, toggles could be
> used, too. Maybe even better than checkboxes.

I think you're overthinking this. A checkbox represents an input with
binary state. As I understand it, whether the input is immediate or
takes effect only on some kind of submission is defined by context -
specifically, whether the checkbox is associated with a form with a
submit button. This does not affect the fact that the input is
fundamentally binary.

In contrast, a button represents a single action, atomic from the
user's point of view. Pressing the button again should (it seems to
me) logically perform the same action again; if the action performed
every time the button is pressed can only be described as something
like "toggle the X", you've done something wrong in your design. You
should be able to make a checkbox look like a button (albeit, one
presumes, one that remains "pushed" in order to represent its state),
and *could* even make a button look like a checkbox (although I can't
imagine why you would want to), but they represent different things

A toggle or switch is an input with binary state. Therefore, it is a
checkbox, with a different shape from usual. Incidentally, in the case
of text to the sides of a styled switch, as mentioned above, it seems
clear to me that the actual switch part in the middle is the input,
and the text parts are labels, all inside an outer frame block.

More information about the whatwg mailing list