Toggle input

Feedback
1

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?

2

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
3

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.

4

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.

5

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

6

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
7

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

2 Likes
8

Toggle has landed:

4 Likes
9

Perfect, thanks!

1 Like
10

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

1 Like