Skip to content
Advertisement

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?

Advertisement

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.

User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement