How to render the same input element in more cells

Community Help
1

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

import {checkbox} from "@jashkenas/inputs"

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

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

2

If you use Observable Inputs, then I would recommend reading the Synchronized Inputs notebook.

Here is an example that synchronizes multiple checkbox inputs.

1 Like
3

Hi @DanielKerrigan, thanx for your pointer. No I’m using @jashkenas/inputs. I haven’t found a way to that so far.

4

Is there a reason why you cannot use the checkboxes from Observable Inputs? Are you using a different type of input that isn’t in the official inputs?

I’ve updated this example notebook to show how synchronized views and mutable forms can be used to synchronize some inputs from @jashkenas/inputs, such as a slider and color picker, but the approach unfortunately does not work with checkboxes.

5

Hi. No, there isn’t. I was just wondering if there were a general pattern to apply also to other inputs libraries. Thanx for your kind help!

Cheers!

6

I was just wondering if there were a general pattern to apply also to other inputs libraries.

YES! I wrote up some of the things you should do here: Design Guidelines and Linter for Reusable UI Components / Tom Larkworthy | Observable

The problem is that @jashkenas/inputs are not ‘back writable’ which impedes their reusability. So those inputs are not following where we have converged.

1 Like