Lightweight interface components for exploring data and building interactive displays

Mike Bostock

Observable

Hello, Inputs!

Button Input / Observable Inputs

Toggle Input / Observable Inputs

Checkbox Input / Observable Inputs

Date Input / Observable Inputs

Radio Input / Observable Inputs

Range Input / Observable Inputs

Select Input / Observable Inputs

Text Input / Observable Inputs

Textarea Input / Observable Inputs

Color Input / Observable Inputs

File Input / Observable Inputs

Table Input / Observable Inputs

Search Input / Observable Inputs

Synchronized Inputs

Legacy Inputs

Form Input / Observable Inputs

Observable Inputs

@jashkenas/inputs's checkbox had an option to submit newly selected values only after clicking a "submit" button. This comes in handy when checkbox values trigger big changes in a notebook, which take several seconds to resolve. Otherwise, going from one state in a checkbox selector to another one might be a frustrating experience. Is it possible to add this option?

Mikhail Panko

Please upvote or comment on this issue: https://github.com/observablehq/inputs/issues/109

I didn't understand why it returns a list of functions. I think the example in https://observablehq.com/@observablehq/input-radio is easier to understand. It would be `types.map(t => new t())` here

Sylvain Lesage

I changed it to be an array of objects which is hopefully easier to follow.

It must have been over looked as it's happen a few times with the new input pages,  the default value: is not an array 'red' instead of ['red'].

Brett Cooper

should it be {value: [12]}? The current value option is ignored

Could you add an example about how to use "keyof" and "valueof" functions?

Shuai Hao

I recommend using a Map object instead of using the keyof and valueof functions. I’m not sure I’ve seen any practical application of the latter yet.

How would you go about adding the default value after d3.group, to say default have 5,4,3 checked. The above methods work with just {value: [5,4,3]} but that doesn't seem to work here.

You can say key: [3, 4, 5]: you’re specifying the value in terms of keys, not values.

Is key part of the supported API? It's not listed in the Inputs readme, and this seems to be the only example that's using it.