30:[{"id":"31ca24545a0603dce099d10ee89ee5ae72d29fa55e8fc7c9ffb5ded87ac83060d80f1d9e21f4ae8eb04c1e8940b7287d179fe8060d887fb1f055f430e210007c","href":"https://static.observableusercontent.com/files/31ca24545a0603dce099d10ee89ee5ae72d29fa55e8fc7c9ffb5ded87ac83060d80f1d9e21f4ae8eb04c1e8940b7287d179fe8060d887fb1f055f430e210007c","name":"athletes.csv","type":"text/csv","lastModified":1612409590174.363,"size":841836}] 2e:{"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"},{"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"},{"id":12,"value":"viewof colors = Inputs.checkbox([\"red\", \"green\", \"blue\"], {label: \"color\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"colors","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"html`

${colors.map(color => html`

`)}`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":23,"value":"viewof watching = Inputs.checkbox(teams, {label: \"Watching\", format: x => x.name})","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"watching","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":107,"value":"viewof vowels = Inputs.checkbox([...\"AEIOUY\"], {label: \"Vowel\", disabled: [\"Y\"]})","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"vowels","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":32,"value":"colors2","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":38,"value":"sizes","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":75,"value":"size2","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":83,"value":"athletes = FileAttachment(\"athletes.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":90,"value":"goldAthletes.flat()","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":100,"value":"viewof bases = Inputs.checkbox(\"GATTACA\", {sort: true, unique: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"bases","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}