How to render the same input element in more cells in ObservableHQ

Let’s say I have the following checkbox element in Observablehq:

viewof myFilter = checkbox({
  title: "Foo",
  description: "bar",
  options: myOptions,
  })

I want to render the same element in more distinct cells along a notebook and I want to synchronize all their selections. Is there a way to do that?

Answer

It looks like you’re using Jeremy Ashkenas’s venerable inputs library. There’s a newer official Inputs library, which is already included on the page (you don’t have to import it).

The official inputs support synchronization using Inputs.bind (more info). For example, these two cells produce two sets of synchronized checkboxes:

viewof a = Inputs.checkbox(["Foo", "bar"])

Inputs.bind(Inputs.checkbox(["Foo", "bar"]), viewof a)

Here’s a demo.

The official inputs checkbox API is roughly like Inputs.checkbox(arrayOfChoices, optionsObject). Instead of title and description, there’s just a label: Inputs.checkbox(["Foo", "bar"], {label: "Your choice"}). More documentation.