2d:null 2e:["$","title",null,{"children":"Gray Segmented Control | Xan Gregg | Observable"}] 33:T6b2,segmentedControl = function(label, name, items, defaultItemName, width="8em", labelWidth="auto") { return `

` + (label == "" ? "" : `

${label}

`) + items.map((item, index) => `

${item[1]}

`).join("") + `

` }34:[] 31:{"id":"4ecef97df99e2e6b","slug":"gray-segmented-control","title":"Gray Segmented Control","thumbnail":"c4106812b7c6144f76ca45c82b4f38ebf44450d432f5eee021bd26354671fa35","access_level":"public","create_time":"$D2019-02-02T18:15:07.648Z","update_time":"$D2019-02-03T01:10:21.021Z","view_time":null,"first_public_time":"$D2019-02-02T19:24:09.292Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"137f0ff4eb6513ad","login":"xangregg","name":"Xan Gregg","avatar_url":"https://avatars-next.observableusercontent.com/e0777d0101875e53efb997a087a1a33fa4ad98c935a80d70a78399b131707eec","tier":"starter_2024"},"version":146,"publish_version":146,"role":null,"authored":false,"authors":[{"type":"individual","id":"edbf8118f31be45e","login":"xangregg","name":"Xan Gregg","avatar_url":"https://avatars-next.observableusercontent.com/e0777d0101875e53efb997a087a1a33fa4ad98c935a80d70a78399b131707eec","tier":null}],"members":[{"type":"individual","id":"edbf8118f31be45e","login":"xangregg","name":"Xan Gregg","avatar_url":"https://avatars-next.observableusercontent.com/e0777d0101875e53efb997a087a1a33fa4ad98c935a80d70a78399b131707eec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Gray Segmented Control","cells":[{"id":0,"value":"md`# Gray Segmented Control\nSimple [segmented control](https://developer.apple.com/design/human-interface-guidelines/macos/selectors/segmented-controls/) suitable for placing inside a [form](https://beta.observablehq.com/@mbostock/form-input). Styling is currently fixed to using light grays due to my lack of style. There is a fixed width for each item (8em) that you can override in the call.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"viewof object = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"`Test output:\n $ {segmentedControl(\"Fruit:\", \"fruit\", [[\"a\", \"Apple\"], [\"b\", \"Banana\"], [\"c\", \"Cherry\"]], \"b\")}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"object","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"