2b:null 2c:["$","title",null,{"children":"Checkbox Input / Observable Inputs | Observable | Observable"}] 31:[{"id":"31ca24545a0603dce099d10ee89ee5ae72d29fa55e8fc7c9ffb5ded87ac83060d80f1d9e21f4ae8eb04c1e8940b7287d179fe8060d887fb1f055f430e210007c","href":"https://static.observableusercontent.com/files/31ca24545a0603dce099d10ee89ee5ae72d29fa55e8fc7c9ffb5ded87ac83060d80f1d9e21f4ae8eb04c1e8940b7287d179fe8060d887fb1f055f430e210007c","name":"athletes.csv","type":"text/csv","lastModified":1612409590174.363,"size":841836}] 2f:{"id":"9ebea923ea137d14","slug":"input-checkbox","title":"Checkbox Input / Observable Inputs","thumbnail":"e57df7e656bfe516977c5f3ee4e26be7f7991df40747fbfbde0652ac193eb978","access_level":"public","create_time":"$D2021-02-03T20:04:08.604Z","update_time":"$D2024-01-09T14:05:08.632Z","view_time":null,"first_public_time":"$D2021-02-04T15:13:46.857Z","fork":false,"stars":20,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":155,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[{"id":"2a3aa71cff48aa21","reply_to_id":null,"content":"should it be {value: [12]}? The current value option is ignored","create_time":"$D2021-02-05T14:45:31.370Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null}},{"id":"0d2209ffdd5a8633","reply_to_id":null,"content":"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","create_time":"$D2021-02-05T14:51:55.736Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null}},{"id":"291e82c9f0793744","reply_to_id":null,"content":"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'].","create_time":"$D2021-02-06T05:48:07.786Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null}},{"id":"c62658cf5bcb3954","reply_to_id":"0d2209ffdd5a8633","content":"I changed it to be an array of objects which is hopefully easier to follow.","create_time":"$D2021-02-06T06:13:22.906Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"11cea2bb8964db34","reply_to_id":"291e82c9f0793744","content":"Thanks, fixed!","create_time":"$D2021-02-06T06:13:28.473Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"db20b2a9ed7d2be9","reply_to_id":"2a3aa71cff48aa21","content":"Thanks, fixed!","create_time":"$D2021-02-06T06:13:35.787Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"4a72f9bd247e984e","reply_to_id":"2a3aa71cff48aa21","content":"Could you add an example about how to use \"keyof\" and \"valueof\" functions?","create_time":"$D2021-02-09T04:59:05.341Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"366775cc8ebeafb9","login":"haoshuai999","name":"Shuai Hao","avatar_url":"https://avatars-next.observableusercontent.com/f05084e0c4330f91ef774bda97c51132e0c884830cebbc30d9202035d1939c2c","tier":null}},{"id":"e87e8e927e40bc81","reply_to_id":null,"content":"@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?","create_time":"$D2021-05-05T03:35:22.508Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"c6cedd1a4153dc26","login":"mikpanko","name":"Mikhail Panko","avatar_url":"https://avatars-next.observableusercontent.com/4a7a289505521108a32d4f2cf435c51238acba316b0880dd12565bbc7bb1363e","tier":null}},{"id":"ae9023a1897d7c77","reply_to_id":"e87e8e927e40bc81","content":"Please upvote or comment on this issue: https://github.com/observablehq/inputs/issues/109","create_time":"$D2021-05-12T19:28:36.952Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"f26ff6262bcbfb0b","reply_to_id":null,"content":"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.","create_time":"$D2021-10-18T15:51:41.084Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"3f449a3cee7c85fa","login":"quackas","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dabdc9b9adda77ca353ae654b9ce7e6cfdbe80dae8015a59d9220fe2562f92b7","tier":null}},{"id":"71197932545eb06e","reply_to_id":"f26ff6262bcbfb0b","content":"You can say key: [3, 4, 5]: you’re specifying the value in terms of keys, not values.","create_time":"$D2021-10-19T04:57:15.555Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"94e494aa3cd04235","reply_to_id":"2a3aa71cff48aa21","content":"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.","create_time":"$D2021-10-19T04:58:55.851Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"bbad480f8eba71bb","reply_to_id":"f26ff6262bcbfb0b","content":"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.","create_time":"$D2023-03-25T11:09:54.682Z","update_time":"$D2023-03-25T11:10:43.914Z","resolved":false,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":13,"collection":{"id":"c100282feee59b2a","slug":"inputs","title":"Observable Inputs","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Checkbox Input / Observable Inputs","cells":[{"id":8,"value":"

Checkbox Input / Observable Inputs

Observable Inputs › Checkbox · API

\n\n# Input: Checkbox\n\nA Checkbox allows the user to choose any of a given set of values. (See [Radio](/@observablehq/input-radio) for single-choice.) A Checkbox is recommended over a [Select](/@observablehq/input-select) when the number of values to choose from is small — say, seven or fewer — because all choices will be visible up-front, improving usability. For zero or one choice, see [Toggle](/@observablehq/input-toggle).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":58,"value":"md`The initial value of a Checkbox defaults to an empty array. You can override this by specifying the *value* option, which should also be an array (or iterable).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"viewof colors = Inputs.checkbox([\"red\", \"green\", \"blue\"], {label: \"color\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"colors","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"html`

${colors.map(color => html`

`)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"md`A Checkbox’s values need not be strings: they can be anything. Specify a *format* function to control how these values are presented to the reader.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"teams = [\n {name: \"Lakers\", location: \"Los Angeles, California\"},\n {name: \"Warriors\", location: \"San Francisco, California\"},\n {name: \"Celtics\", location: \"Boston, Massachusetts\"},\n {name: \"Nets\", location: \"New York City, New York\"},\n {name: \"Raptors\", location: \"Toronto, Ontario\"},\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"viewof watching = Inputs.checkbox(teams, {label: \"Watching\", format: x => x.name})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"watching","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"md`A Checkbox can be disabled by setting the *disabled* option to true. Alternatively, specific options can be disabled by passing an array of values to disable.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"viewof vowels = Inputs.checkbox([...\"AEIOUY\"], {label: \"Vowel\", disabled: [\"Y\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"vowels","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"md`The *format* function, like the *label*, can return either a text string or an HTML element. This allows extensive control over the appearance of the Checkbox, if desired.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"viewof colors2 = Inputs.checkbox([\"red\", \"green\", \"blue\"], {value: [\"red\"], label: html`Colors`, format: x => html`${x}`})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"colors2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"md`If the Checkbox’s data are specified as a Map, the values will be the map’s values while the keys will be the displayed options. (This behavior can be customized by passing *keyof* and *valueof* function options.) Below, the displayed sizes are named, but the value is the corresponding number of fluid ounces.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"viewof sizes = Inputs.checkbox(new Map([[\"Short\", 8], [\"Tall\", 12], [\"Grande\", 16], [\"Venti\", 20]]), {value: [12], label: \"Size\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"sizes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"md`Since the *format* function is passed elements from the data, it can access both the key and value from the corresponding Map entry.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"viewof size2 = Inputs.checkbox(\n new Map([[\"Short\", 8], [\"Tall\", 12], [\"Grande\", 16], [\"Venti\", 20]]),\n {value: [12], label: \"Size\", format: ([name, value]) => `${name} (${value} oz)`}\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"size2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"md`Passing a Map to Checkbox is especially useful in conjunction with [d3.group](/@d3/d3-group). For example, given a tabular dataset of Olympic athletes, we can use d3.group to group them by gold medal 🥇 count, and then Checkbox to select the athletes for the chosen count. See [Hello, Inputs!](/@observablehq/hello-inputs) for more data analysis examples. Note that the value of the Checkbox will be an array of arrays, since d3.group returns a Map from key to array; use [*array*.flat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat) to merge these arrays if desired.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"athletes = FileAttachment(\"athletes.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"viewof goldAthletes = Inputs.checkbox(d3.group(athletes, d => d.gold), {label: \"Gold medal count\", sort: \"descending\", key: [4, 5]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"goldAthletes.flat()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"md`If the *sort* and *unique* options are specified, the Checkbox’s keys will be sorted and duplicate keys will be discarded, respectively. Try editing the code below to remove the *sort* or *unique* options to understand their effect.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"viewof bases = Inputs.checkbox(\"GATTACA\", {sort: true, unique: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"bases","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"