2a:null 2b:["$","title",null,{"children":"List / Observable Inputs | Zihou Ng | Observable"}] 30:[] 2e:{"id":"e908f7807d6a6db7","slug":"input-list","title":"List / Observable Inputs","thumbnail":"f52fff8e3b7f7eac3b99c939c12d26f1337b1bdb9f803efc0ac632844d708570","access_level":"public","create_time":"$D2022-08-13T10:43:49.758Z","update_time":"$D2022-08-29T01:49:43.356Z","view_time":null,"first_public_time":"$D2022-08-13T11:05:01.780Z","fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"7fad80bf128915e9","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":"starter_2024"},"version":208,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dbb85afd665c9e5e","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":null}],"members":[{"type":"individual","id":"dbb85afd665c9e5e","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"9a20b99711453f0b","slug":"observable-inputs","title":"Observable Inputs","owner":{"id":"7fad80bf128915e9","login":"stwind","name":"Zihou Ng"}},"type":"notebook","body":{"title":"List / Observable Inputs","cells":[{"id":0,"value":"

List / Observable Inputs

Custom Observable Inputs › List

\n\n# Input: List","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"A little utility to combine [Inputs](https://observablehq.com/collection/@observablehq/inputs) into a single list, similar to [Form](https://observablehq.com/@observablehq/input-form) but horizontally. Useful for vector/matrix inputs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":78,"value":"```javascript\nimport { list } from \"@stwind/input-list\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":13,"value":"viewof vec3H = list([Inputs.range([0,1], { value: .1, step: .001 }),\n Inputs.range([0,1], { value: .2, step: .001 }),\n Inputs.range([0,1], { value: .3, step: .001 })], \n { columns: 3, label: \"vec3\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"vec3H","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"Or just vertically","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":19,"value":"viewof vec3V = list([Inputs.range([0,1], { value: .1, step: .001 }),\n Inputs.range([0,1], { value: .2, step: .001 }),\n Inputs.range([0,1], { value: .3, step: .001 })], \n { columns: 1, label: \"vec3\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"viewof mat4 = list(d3.range(16).map(() => Inputs.range([0,1], { value: Math.random(), step: .001 })), \n { columns: 4, label: \"mat4\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"mat4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"Can also be combined with forms","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":41,"value":"viewof form = Inputs.form({\n toggles: list([Inputs.toggle({ label: \"Foo\", value: true }),\n Inputs.toggle({ label: \"Bar\", value: false }),\n Inputs.toggle({ label: \"Baz\", value: true })],\n { columns: 3, label: \"toggles\" }),\n mat3: list(d3.range(9).map(() => Inputs.range([0,1], { value: Math.random(), step: .001 })), \n { columns: 3, label: \"mat3\" }),\n mat2x3: list(d3.range(6).map(() => Inputs.range([0,1], { value: Math.random(), step: .001 })), \n { columns: 2, label: \"mat2x3\" }),\n vec4: list(d3.range(4).map(() => Inputs.range([0,1], { value: Math.random(), step: .001 })), \n { columns: 4, label: \"vec4\" }),\n dates: list([Inputs.date({ value: \"2021-09-21\" }), Inputs.date({ value: \"2022-09-21\" })],\n { columns: 2, label: \"dates\" }),\n colors: list([Inputs.color({ value: \"#628493\" }), Inputs.color({ value: \"#dba4a4\" }), Inputs.color({ value: \"#f09494\" })],\n { columns: 3, label: \"colors\" }),\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"form","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"It can even be nested and with different data types to make complex control panes like those in [ImGui](https://github.com/ocornut/imgui).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":61,"value":"viewof multi = list([list([Inputs.range([0,1], { value: .1, step: .1 }), Inputs.range([0,1], { value: .9, step: .1 })],\n { columns: 2 }),\n list([Inputs.button(\"Button 1\"), Inputs.button(\"Button 2\"), Inputs.button(\"Button 3\")], \n { columns: 3 }),\n Inputs.radio([\"foo\", \"bar\", \"baz\"], { value: \"bar\" }),\n Inputs.checkbox([\"red\", \"green\", \"blue\"], { value: [\"red\"] }),\n list([Inputs.text({ placeholder: \"First Name\" }), Inputs.text({ placeholder: \"Last Name\" })], \n { columns: 2 }),\n list([Inputs.select(new Map([[\"Short\", 8], [\"Tall\", 12], [\"Grande\", 16], [\"Venti\", 20]]), { value: 12 }),\n Inputs.color({ value: \"#a09494\" })],\n { columns: 2 })\n ], { columns: 3, label: \"multi\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"multi","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6,"value":"list = {\n const NS = Inputs.button().className;\n \n return (inputs, { label = \"\", columns = 1 } = {}) => {\n const value = inputs.map(inp => inp.value);\n const oninput = () => inputs.forEach((inp, i) => value[i] = inp.value);\n\n const style = {\n \"display\": \"grid\",\n \"grid-template-columns\": `repeat(${columns},minmax(auto,calc(var(--input-width) - var(--length2))))`,\n \"column-gap\": \"var(--length2)\"\n };\n const form = htl.html`