Toggle input

New Observable Inputs are great. I wonder what is the best way to use them to create a simple toggle input that returns a boolean. Having to test if the Array returned by Checkbox is empty is not really natural. Is it natively supported by Observable Inputs?

For cases like these I simply proxy the value property, e.g.:

function changeValue(element, fn) {
  return Object.defineProperty(html`<div>${element}`, 'value', {get: () => fn(element.value)});
}
viewof ok2 = changeValue(Checkbox(["toggle me"]), v => !!v.length)

This works for any events that are set to bubble.

2 Likes

Interesting generic proxy (that might be adapted to also proxy the setter).

But this toggle input is so common that I miss the @jashkenas checkbox input that returned false instead of an empty array when no checkbox were selected. There were no need to wrap the input with an extra logic.

Sorry, to answer your original question: No, not as far as I’m aware. Mike mentioned that he’s not fundamentally against adding a toggle, but it’s very low priority.

OK, good to know. Do you think that having this kind of small inputs gathered in a common “community inputs” notebook would be useful?

Interesting idea! I can see many of these popping up, and it would be good to highlight and assemble them. Perhaps in a collection… let me chat to the team about that.

1 Like

Here’s a PR if you’d like to review:

2 Likes

Toggle has landed:

4 Likes

Perfect, thanks!

1 Like

I realize it had been discussed for days here: Simple checkbox · Issue #35 · observablehq/inputs · GitHub

1 Like