2b:null 2c:["$","title",null,{"children":"Radio Input / Observable Inputs | Observable | Observable"}] 31:[{"id":"31ca24545a0603dce099d10ee89ee5ae72d29fa55e8fc7c9ffb5ded87ac83060d80f1d9e21f4ae8eb04c1e8940b7287d179fe8060d887fb1f055f430e210007c","href":"https://static.observableusercontent.com/files/31ca24545a0603dce099d10ee89ee5ae72d29fa55e8fc7c9ffb5ded87ac83060d80f1d9e21f4ae8eb04c1e8940b7287d179fe8060d887fb1f055f430e210007c","name":"athletes.csv","type":"text/csv","lastModified":1612408668343.164,"size":841836}] 2f:{"id":"25d5ee3fdd06649e","slug":"input-radio","title":"Radio Input / Observable Inputs","thumbnail":"09665c3b8fe597fc03a441e069d5bf723a0457f3dc2c1ac7e56178aa5eb0d322","access_level":"public","create_time":"$D2021-02-02T20:59:26.825Z","update_time":"$D2021-10-15T19:48:02.911Z","view_time":null,"first_public_time":"$D2021-02-04T15:13:42.665Z","fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":324,"publish_version":324,"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":"1ecec154fe1e7ca4","reply_to_id":null,"content":"It looks like passing \"value\" to set a default selection does not work when you pass an array of objects such as in this case. Even if setting something like value: \"Lakers\" will not work and the default value for the variable will be null.","create_time":"$D2021-05-25T18:12:12.611Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"ff8a3b770bbe1503","login":"jotasolano","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c656cd1d2cfb4f91cc5a81160e046f44058ea27455d7785396bafb2f7662ba03","tier":null}},{"id":"2acb1c903a98ec10","reply_to_id":"1ecec154fe1e7ca4","content":"A radio only takes a single value, so you need to say {value: teams[0]} if you want to set the initial value to the Lakers below. If you use Inputs.checkbox instead of Inputs.radio, you can set the value to an array.","create_time":"$D2021-05-25T19:26:21.398Z","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":"f977bea446c58aaa","reply_to_id":"1ecec154fe1e7ca4","content":"Thank you very much!","create_time":"$D2021-05-25T19:32:04.101Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"ff8a3b770bbe1503","login":"jotasolano","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c656cd1d2cfb4f91cc5a81160e046f44058ea27455d7785396bafb2f7662ba03","tier":null}},{"id":"3ce1ad4fa010ef2a","reply_to_id":null,"content":"The label for each button looks vertically off-center to me, like it's slightly higher than it should be. Viewing on Mac OSX, Chrome v133.","create_time":"$D2025-02-21T20:50:31.285Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"f9e5784b8de6444e","login":"mattdiamond","name":"Matt Diamond","avatar_url":"https://avatars-next.observableusercontent.com/cb45f7f9a7385b5db6258b7130fd1d66bdb91af492cf965d26b049bda3d52391","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":9,"collection":{"id":"c100282feee59b2a","slug":"inputs","title":"Observable Inputs","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":6,"value":"viewof color = Inputs.radio([\"red\", \"green\", \"blue\"], {label: \"color\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"color","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":129,"value":"viewof vote = Inputs.radio([\"Yea\", \"Nay\", null], {value: null, format: x => x ?? \"Abstain\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":138,"value":"vote","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":53,"value":"viewof favorite = Inputs.radio(teams, {label: \"Favorite team\", format: x => x.name})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"favorite","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":289,"value":"viewof vowel = Inputs.radio([...\"AEIOUY\"], {label: \"Vowel\", disabled: [\"Y\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":291,"value":"vowel","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":156,"value":"color2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":210,"value":"size","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":46,"value":"size2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":223,"value":"athletes = FileAttachment(\"athletes.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":228,"value":"goldAthletes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":269,"value":"viewof base = Inputs.radio(\"GATTACA\", {sort: true, unique: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":274,"value":"base","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"