30:[{"id":"31ca24545a0603dce099d10ee89ee5ae72d29fa55e8fc7c9ffb5ded87ac83060d80f1d9e21f4ae8eb04c1e8940b7287d179fe8060d887fb1f055f430e210007c","href":"https://static.observableusercontent.com/files/31ca24545a0603dce099d10ee89ee5ae72d29fa55e8fc7c9ffb5ded87ac83060d80f1d9e21f4ae8eb04c1e8940b7287d179fe8060d887fb1f055f430e210007c","name":"athletes.csv","type":"text/csv","lastModified":1612408668343.164,"size":841836}] 2e:{"title":"Radio Input / Observable Inputs","cells":[{"id":108,"value":"

Radio Input / Observable Inputs

Observable Inputs › Radio · API

\n\n# Input: Radio\n\nA Radio allows the user to choose one of a given set of values. (See [Checkbox](/@observablehq/input-checkbox) for multiple-choice.) A Radio 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.","pinned":false,"hidden":false,"mode":"md"},{"id":180,"value":"md`The initial value of a Radio defaults to null (unlike a Select, which defaults to selecting the first value). You can override this by specifying the *value* option.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof color = Inputs.radio([\"red\", \"green\", \"blue\"], {label: \"color\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"color","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"md`Note that a Radio cannot be cleared by the user once selected; if you wish to allow no selection, include null in the allowed values.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"viewof vote = Inputs.radio([\"Yea\", \"Nay\", null], {value: null, format: x => x ?? \"Abstain\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"vote","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`A Radio’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":294,"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":53,"value":"viewof favorite = Inputs.radio(teams, {label: \"Favorite team\", format: x => x.name})","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"favorite","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"md`A Radio 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":289,"value":"viewof vowel = Inputs.radio([...\"AEIOUY\"], {label: \"Vowel\", disabled: [\"Y\"]})","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"vowel","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"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 Radio, if desired.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"viewof color2 = Inputs.radio([\"red\", \"green\", \"blue\"], {value: \"red\", label: html`Color`, format: x => html`${x}`})","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"color2","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`If the Radio’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":206,"value":"viewof size = Inputs.radio(new Map([[\"Short\", 8], [\"Tall\", 12], [\"Grande\", 16], [\"Venti\", 20]]), {value: 12, label: \"Size\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"size","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"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":44,"value":"viewof size2 = Inputs.radio(\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":46,"value":"size2","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"md`Passing a Map to Radio 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 Radio to select the athletes for the chosen count. See [Hello, Inputs!](/@observablehq/hello-inputs) for a more complete thread of data analysis examples.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"athletes = FileAttachment(\"athletes.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"viewof goldAthletes = Inputs.radio(d3.group(athletes, d => d.gold), {label: \"Gold medal count\", sort: \"descending\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"goldAthletes","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"md`If the *sort* and *unique* options are specified, the Radio’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":269,"value":"viewof base = Inputs.radio(\"GATTACA\", {sort: true, unique: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"base","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}