Rendering boolean values as a checkbox

[MattiSG]

Hi,

It is documented that "type": "boolean" values are rendered as a <select>, and that you may change the default true/false options.

However, the most logical GUI for an "on or off" value would be a checkbox. What's the rationale for not displaying a checkbox?

[webron]

Well, a checkbox would work if the given property/parameter is mandatory. If it is not, you need a way to not set it, so that's three values - true/false/unset. A select allows you to have an empty value as well.

[MattiSG]

Checkboxes do have three states: checked, not checked, and indeterminate.

Use the checked attribute to indicate whether this item is selected. You can also use the indeterminate attribute to indicate that the checkbox is in an indeterminate state (on most platforms, this draws a horizontal line across the checkbox).

(MDN, spec)

The rendering algorithm would thus be: default to indeterminate if the property is not mandatory.

[webron]

UX-wise, I think it would be confusing. indermediate is normally used to say that the value is partial - when using tree, a parent would be intermediate if some of its children are true and some are false.

Also, it looks like it is supported by IE9 onwards and currently we aim to support IE8 as well.

[MattiSG]

indermediate is normally used to say that the value is partial

This is one of the use cases, when selecting multiple values, indeed :)
Yet there are other use cases. As the name states, indeterminate is used whenever the state is indeterminate. It is not very common, but it does exist as a default “not checked nor unchecked” value.

As far as UX is concerned, the only way to answer properly would be to present to users the choice between the current “empty/true/false” select and a checkbox on the default “indeterminate” state. As far as I'm concerned, I know I would prefer the latter.

Finally, browser support is mostly about rendering (otherwise the default is “unchecked”). If really IE8 is mandatory, then adding a polyfill is not that much work.

[webron]

I'm not sure it's worth the effort (especially with IE8 support) and with regards to prioritization, it's definitely not at the top of the list. A PR could work here if it covers everything and has the option to be turned on (it should be off by default), but I'm not even sure this is the kind of customization we're looking to add. If more people comment and +1 (or -1 as well), it may be worth considering.

[morficus]

@webron - to quote your previous comment:

A select allows you to have an empty value as well.

I'm currently using what's in the master branch and boolean values display as a drop-down with only 2 values (true or false). Despite the parameter being marked as required: false, the generated drop-down does not contain a empty value.

Is this a bug (if so, I can open a new issue) or done by design?

[webron]

@morficus - that sounds like a bug and yes, please open a new issue on it.

[morficus]

@webron - done #1191

[MattiSG]

Just to make the discussion a bit clearer on the expected UX:

:)

[noirbizarre]

I totally agree with @MattiSG proposal.
The current select is a bit awkward for a boolean.

[fehguy]

@ponelat can you make sure that if required:false for a boolean value is set, then there's an empty value in the drop-down?

[MattiSG]

What's the link with the issue at hand?

[morficus]

I do not agree with the proposal of changing it from a select box to checkboxes, and here is why:

1. It is true that a checkbox has 3 states - selected, not selected and indeterminate - but there is no way to mark a checkbox as "indeterminate" with standard import devices (aka: mouse, keyboard or touchscreen) with out additional JavaScript
2. The indeterminate state is visual only. The checkbox is still either checked or unchecked as a state.
3. It becomes very unclear as to what is "true" vs "false". The ASSUMPTION is that selected = true, not selected = false, but it is not as clear/obvious as with select box.

[morficus]

can you make sure that if required:false for a boolean value is set, then there's an empty value in the drop-down?

@fehguy that bug was reported (and fixed) here: #1191

doh! >_< just noticed you commented and closed that issue

[noirbizarre]

@morficus: it's debatable:

1. SwaggerUI is a SPA, a pure javascript application, so it does not matter wether or not it requires javascript: the whole app is javascript
2. With javascript it's not an issue anymore, the third state can exists
3. I think it's very clear for every one because this is the checkbox metaphor, the only reason of this widget existence. I've never seen another assumption about the checkbox usage. From ages, even when it was only paper forms, checkbox checked has meant "yes". If you know another checkbox usage, I'm very curious and interested.

[fehguy]

Now that we're about ready to drop IE8, I think the solution from @MattiSG makes sense.

[webron]

Going to close this one out as we're not going to implement it from our end. @morficus's latest points do make sense. If anyone wants to make a new proposal, by all means do so, though it would be better if it is through a PR. Can't guarantee it'll be accepted, but we'll definitely review it.

[MartinMuzatko]

This makes no sense with formData.. with formData you should send on or off with checkboxes... And most bodyparsers interpret that as true or false.. not so with true or false sent as string, then this does not work.