# Toggle input

**URL:** https://talk.observablehq.com/t/toggle-input/4580
**Category:** Feedback
**Created:** [February 5, 2021, 4:46pm UTC](https://talk.observablehq.com/t/toggle-input/4580 "2021-02-05T16:46:19Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![severo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/severo/32/786_2.png) [@severo](https://talk.observablehq.com/u/severo)
#### Post date: [February 5, 2021, 4:46pm UTC](https://talk.observablehq.com/t/toggle-input/4580/1 "2021-02-05T16:46:19Z")

</div>

New [Observable Inputs](https://observablehq.com/@observablehq/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?

https://observablehq.com/embed/@severo/toggle-control?cell=*

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [February 5, 2021, 5:20pm UTC](https://talk.observablehq.com/t/toggle-input/4580/2 "2021-02-05T17:20:10Z")

</div>

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

```javascript
function changeValue(element, fn) {
  return Object.defineProperty(html`<div>${element}`, 'value', {get: () => fn(element.value)});
}

```

```auto
viewof ok2 = changeValue(Checkbox(["toggle me"]), v => !!v.length)

```

This works for any events that are set to bubble.

---

<div class="post-metadata">

### Author: ![severo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/severo/32/786_2.png) [@severo](https://talk.observablehq.com/u/severo)
#### Post date: [February 5, 2021, 5:33pm UTC](https://talk.observablehq.com/t/toggle-input/4580/3 "2021-02-05T17:33:37Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [February 5, 2021, 5:48pm UTC](https://talk.observablehq.com/t/toggle-input/4580/4 "2021-02-05T17:48:55Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![severo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/severo/32/786_2.png) [@severo](https://talk.observablehq.com/u/severo)
#### Post date: [February 5, 2021, 10:08pm UTC](https://talk.observablehq.com/t/toggle-input/4580/5 "2021-02-05T22:08:34Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Cobus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cobus/32/9670_2.png) [@Cobus](https://talk.observablehq.com/u/Cobus)
#### Post date: [February 5, 2021, 10:20pm UTC](https://talk.observablehq.com/t/toggle-input/4580/6 "2021-02-05T22:20:33Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)
#### Post date: [February 5, 2021, 11:00pm UTC](https://talk.observablehq.com/t/toggle-input/4580/7 "2021-02-05T23:00:42Z")

</div>

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

> <https://github.com/observablehq/inputs/pull/67>

---

<div class="post-metadata">

### Author: ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)
#### Post date: [February 6, 2021, 6:16am UTC](https://talk.observablehq.com/t/toggle-input/4580/8 "2021-02-06T06:16:56Z")

</div>

Toggle has landed:

> **[Observable Input: Toggle](https://observablehq.com/@observablehq/input-toggle)**
>
> Observable Inputs › Toggle Toggle A Toggle allows the user to choose one of two values, representing on or off. A Toggle is a specialized form of Checkbox. The initial value of a Toggle defaults to false. You can override this by specifying the value...

---

<div class="post-metadata">

### Author: ![severo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/severo/32/786_2.png) [@severo](https://talk.observablehq.com/u/severo)
#### Post date: [February 6, 2021, 9:19am UTC](https://talk.observablehq.com/t/toggle-input/4580/9 "2021-02-06T09:19:24Z")

</div>

Perfect, thanks!

---

<div class="post-metadata">

### Author: ![severo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/severo/32/786_2.png) [@severo](https://talk.observablehq.com/u/severo)
#### Post date: [February 6, 2021, 9:21am UTC](https://talk.observablehq.com/t/toggle-input/4580/10 "2021-02-06T09:21:26Z")

</div>

I realize it had been discussed for days here: [Simple checkbox · Issue #35 · observablehq/inputs · GitHub](https://github.com/observablehq/inputs/issues/35)
