3e:null 3f:["$","title",null,{"children":"Inputs | Farzad Abdolhosseini | Observable"}] 45:T426,md`# Inputs

*a.k.a “The Grand Native Inputs Bazaar”*

A collection of assorted fancy inputs, odds and ends — with which to produce values to feed your burgeoning sketches. All inputs support optional **titles** and **descriptions**; where it makes sense, inputs also support a **submit** option, which allows you to prevent the value from updating until the input has been finalized. Wares we have on offer: * \`slider\` * \`button\` * \`select\` * \`color\` * \`date\` * \`file\` * \`text\` * \`textarea\` * \`radio\` * \`checkbox\` * \`number\` * \`password\` *If you have an improvement to the bazaar that you’d like to suggest, [please make your change in a fork](https://beta.observablehq.com/@observablehq/fork-share-merge), then email me the link so that I can merge the fix in...*`46:T462,function select(config = {}) { let { value: formValue, title, description, submit, multiple, size, options, onchange } = config; if (Array.isArray(config)) options = config; options = options.map( o => (typeof o === "object" ? o : { value: o, label: o }) ); const form = input({ type: "select", title, description, submit, getValue: input => { const selected = Array.prototype.filter .call(input.options, i => i.selected) .map(i => i.value); return multiple ? selected : selected[0]; }, form: html` ` }); form.output.remove(); form.onchange = onchange; return form; }47:T41a,function radio(config = {}) { let { value: formValue, title, description, submit, options } = config; if (Array.isArray(config)) options = config; options = options.map( o => (typeof o === "string" ? { value: o, label: o } : o) ); const form = input({ type: "radio", title, description, submit, getValue: input => { const checked = Array.prototype.find.call(input, radio => radio.checked); return checked ? checked.value : undefined; }, form: html` ` }); form.output.remove(); return form; }48:T45d,function checkbox(config = {}) { let { value: formValue, title, description, submit, options } = config; if (Array.isArray(config)) options = config; options = options.map( o => (typeof o === "string" ? { value: o, label: o } : o) ); const form = input({ type: "checkbox", title, description, submit, getValue: input => { if (input.length) return Array.prototype.filter .call(input, i => i.checked) .map(i => i.value); return input.checked ? input.value : false; }, form: html` ` }); form.output.remove(); return form; }49:T75f,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; if (!form) form = html``; const input = form.input; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(input) : input.value; if (form.output) form.output.value = display ? display(value) : format ? format(value) : value; form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") input.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } return form; }4a:[] 43:{"id":"7344334623143d74","slug":"inputs","title":"Inputs","thumbnail":"09992b048c9c1516de82a3051feaa5156f1373f443622d4a5a6b28fdc83f482d","access_level":"public","create_time":"$D2019-01-03T04:14:20.087Z","update_time":"$D2019-02-17T03:54:43.677Z","view_time":null,"first_public_time":"$D2019-01-03T04:19:56.978Z","has_unpublished_edits":null,"fork":{"id":"e93997d5089d7165","slug":"inputs","title":"Inputs","owner":{"id":"172cc08ef8a18a4b","login":"jashkenas","name":"Jeremy Ashkenas"}},"stars":1,"starred":false,"owner":{"type":"team","id":"995bd0cc36c98113","login":"farzadab","name":"Farzad Abdolhosseini","avatar_url":"https://avatars-next.observableusercontent.com/d0cab0376875bd8c95a0d7d790616ebacfcc53b69f28ea72012c112bfbeafda8","tier":"starter_2024","bio":""},"version":1670,"publish_version":1670,"role":null,"authored":false,"authors":[{"type":"individual","id":"8fc8c490da39a7f9","login":"farzadab","name":"Farzad Abdolhosseini","avatar_url":"https://avatars-next.observableusercontent.com/d0cab0376875bd8c95a0d7d790616ebacfcc53b69f28ea72012c112bfbeafda8","tier":null,"bio":""}],"members":[{"type":"individual","id":"8fc8c490da39a7f9","login":"farzadab","name":"Farzad Abdolhosseini","avatar_url":"https://avatars-next.observableusercontent.com/d0cab0376875bd8c95a0d7d790616ebacfcc53b69f28ea72012c112bfbeafda8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Inputs","cells":[{"id":0,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"md`---\n## Sliders\n\n\\`import {slider} from \"@jashkenas/inputs\"\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"viewof a = slider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1492,"value":"viewof a1 = slider({\n min: 0, \n max: 1, \n step: 0.01, \n format: \".0%\",\n description: \"Zero to one, formatted as a percentage\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1539,"value":"viewof a2 = slider({\n min: 0,\n max: 1e9,\n step: 1000,\n value: 3250000,\n format: \",\",\n description:\n \"Zero to one billion, in steps of one thousand, formatted as a (US) number\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"viewof a3 = slider({\n min: 0, \n max: 100, \n step: 1, \n value: 10, \n title: \"Integers\", \n description: \"Integers from zero through 100\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"viewof a4 = slider({\n min: 0.9,\n max: 1.1,\n precision: 3,\n description: \"A high precision slider example\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"viewof a5 = slider({\n min: 0.9,\n max: 1.1,\n precision: 3,\n submit: true,\n description: \"The same as a4, but only changes value on submit\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1591,"value":"md`More [fancy slider techniques](https://beta.observablehq.com/@mootari/prime-numbers-slider).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"function slider(config = {}) {\n let {value, min = 0, max = 1, step = \"any\", precision = 2, title, description, getValue, format, display, submit, onchange, oninput} = config;\n if (typeof config == \"number\") value = config;\n if (value == null) value = (max + min) / 2;\n precision = Math.pow(10, precision);\n if (!getValue) getValue = input => Math.round(input.valueAsNumber * precision) / precision;\n const form = input({\n type: \"range\", title, description, submit, format, display,\n attributes: {min, max, step, value},\n getValue\n });\n form.onchange = onchange;\n let orig_oninput = form.oninput;\n form.oninput = (e) => {orig_oninput(e); if( typeof(oninput) == 'function' ) oninput();};\n return form\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"md`---\n## Buttons\n\n\\`import {button} from \"@jashkenas/inputs\"\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"viewof b = button()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"{\n b\n return !this;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"viewof b1 = button({value: \"Click me\", description: \"We use a reference to the button below to record the time you pressed it.\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"{\n b1;\n return new Date(Date.now()).toUTCString()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"function button(config = {}) {\n let {value, title, description, disabled} = config;\n if (typeof config == \"string\") value = config;\n if (!value) value = \"Ok\";\n const form = input({\n type: \"button\", title, description,\n attributes: {disabled, value}\n });\n form.output.remove();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"md`---\n## Dropdown Menus and Multiselects\n\n\\`import {select} from \"@farzadab/inputs\"\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"viewof dd = select([\"Spring\", \"Summer\", \"Fall\", \"Winter\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"dd","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":947,"value":"viewof dd1 = select({\n title: \"Stooges\",\n description: \"Please pick your favorite stooge.\",\n options: [\"Curly\", \"Larry\", \"Moe\", \"Shemp\"],\n value: \"Moe\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"dd1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"viewof dd2 = select({\n description: \"As a child, which vegetables did you refuse to eat?\",\n options: [\"Spinach\", \"Broccoli\", \"Brussels Sprouts\", \"Cauliflower\", \"Kale\", \"Turnips\", \"Green Beans\", \"Asparagus\"],\n multiple: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":986,"value":"dd2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1524,"value":"viewof dd3 = {\n const dd3 = select({\n title: \"How are you feeling today?\",\n options: [\n { label: \"🤷\", value: \"shrug\" },\n { label: \"😂\", value: \"tears-of-joy\" },\n { label: \"😍\", value: \"loving-it\" },\n { label: \"🤔\", value: \"hmmm\" },\n { label: \"😱\", value: \"yikes\" },\n { label: \"😈\", value: \"mischievous\" },\n { label: \"💩\", value: \"poo\" }\n ],\n value: \"hmmm\"\n });\n dd3.input.style.fontSize = \"30px\";\n dd3.input.style.marginTop = \"8px\";\n return dd3;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1527,"value":"dd3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"md`---\n## Color Pickers\n\n*value: a hexadecimal string: * \\`\"#bada55\"\\` \n\n\\`import {color} from \"@jashkenas/inputs\"\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"viewof c = color()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"viewof c1 = color({\n value: \"#0000ff\",\n title: \"Background Color\",\n description: \"This color picker starts out blue\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"function color(config = {}) {\n let {value, title, description, submit, display} = config;\n if (typeof config == \"string\") value = config;\n if (value == null) value = '#000000';\n const form = input({\n type: \"color\", title, description, submit, display,\n attributes: {value}\n });\n if (title || description) form.input.style.margin = \"5px 0\";\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"md` ---\n## Dates\n\n*value: a YYYY-MM-DD formatted string: * \\`\"2016-11-08\"\\` \n\n\\`import {date} from \"@jashkenas/inputs\"\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"viewof d = date()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"viewof d1 = date({\n title: \"2017\", \n min: \"2017-01-01\",\n max: \"2017-12-31\",\n value: \"2017-01-01\",\n description: \"Only dates within the 2017 calendar year are allowed\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"function date(config = {}) {\n let {min, max, value, title, description, display} = config;\n if (typeof config == \"string\") value = config;\n return input({\n type: \"date\", title, description, display,\n attributes: {min, max, value}\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"md`---\n## File Upload\n*Use the JavaScript [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications) to work with uploaded file contents.*\n\n\\`import {file} from \"@jashkenas/inputs\"\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"viewof e = file()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"viewof e1 = file({\n title: \"Photographs\",\n description: \"Only .jpg files are allowed in this example. Choose some images, and they’ll appear in the cell below.\",\n accept: \".jpg\",\n multiple: true,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"{\n const div = html`

`;\n for (var j = 0; j < e1.length; j++) {\n let file = e1[j];\n let img = html``\n img.src = await Files.url(e1[j]);\n div.append(img);\n }\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"function file(config = {}) {\n let {multiple, accept, title, description} = config;\n const form = input({\n type: \"file\", title, description,\n attributes: {multiple, accept},\n action: form => {\n form.input.onchange = () => {\n form.value = multiple ? form.input.files : form.input.files[0];\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n }\n });\n form.output.remove();\n form.input.onchange();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"md`---\n## Text Inputs\n\n\\`import {text} from \"@jashkenas/inputs\"\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"viewof f = text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"viewof f1 = text({title: \"A Text Input\", placeholder: \"Placeholder text\", description: \"Note that text inputs don’t show output on the right\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"f1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"viewof f2 = text({placeholder: \"Placeholder text\", description: \"This input only changes value on submit\", submit: \"Go\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"f2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"function text(config = {}) {\n const {\n value,\n title,\n description,\n autocomplete = \"off\",\n maxlength,\n minlength,\n pattern,\n placeholder,\n size,\n submit\n } = config;\n if (typeof config == \"string\") value = config;\n const form = input({\n type: \"text\",\n title,\n description,\n submit,\n attributes: {\n value,\n autocomplete,\n maxlength,\n minlength,\n pattern,\n placeholder,\n size\n }\n });\n form.output.remove();\n form.input.style.fontSize = \"1em\";\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"md`---\n## Textareas\n\n\\`import {textarea} from \"@jashkenas/inputs\"\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"viewof g = textarea()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"g","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"viewof g1 = textarea({\n title: \"Your Great American Novel\", \n placeholder: \"Insert story here...\", \n spellcheck: true,\n width: \"100%\",\n rows: 10,\n submit: \"Publish\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"g1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"function textarea(config = {}) {\n let {value, title, description, autocomplete, cols = 45, rows = 3, width, height, maxlength, placeholder, spellcheck, wrap, submit} = config;\n if (typeof config == \"string\") value = config;\n if (value == null) value = \"\";\n const form = input({\n form: html``, \n title, description, submit,\n attributes: {autocomplete, cols, rows, maxlength, placeholder, spellcheck, wrap}\n });\n form.output.remove();\n if (width != null) form.input.style.width = width;\n if (height != null) form.input.style.height = height;\n if (submit) form.submit.style.margin = \"0\";\n if (title || description) form.input.style.margin = \"3px 0\";\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"md`---\n## Radio Buttons\n\n\\`import {radio} from \"@jashkenas/inputs\"\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"viewof r = radio([\"Lust\", \"Gluttony\", \"Greed\", \"Sloth\", \"Wrath\", \"Envy\", \"Pride\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"r","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"viewof r1 = radio({\n title: 'Contact Us',\n description: 'Please select your preferred contact method',\n options: [\n { label: 'By Email', value: 'email' },\n { label: 'By Phone', value: 'phone' },\n { label: 'By Pager', value: 'pager' },\n ],\n value: 'pager'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"r1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"md`---\n## Checkboxes\n\n\\`import {checkbox} from \"@jashkenas/inputs\"\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"viewof ch = checkbox([\"Lust\", \"Gluttony\", \"Greed\", \"Sloth\", \"Wrath\", \"Envy\", \"Pride\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"ch","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"viewof ch1 = checkbox({\n title: 'Colors',\n description: 'Please select your favorite colors',\n options: [\n { value: 'r', label: 'Red' },\n { value: 'o', label: 'Orange' },\n { value: 'y', label: 'Yellow' },\n { value: 'g', label: 'Green' },\n { value: 'b', label: 'Blue' },\n { value: 'i', label: 'Indigo' },\n { value: 'v', label: 'Violet' },\n ],\n value: ['r','g','b']\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"ch1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":871,"value":"viewof ch3 = checkbox({\n description: \"Just a single checkbox to toggle\",\n options: [{ value: \"toggle\", label: \"On\" }],\n value: \"toggle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"ch3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"md`---\n## Numbers\n\n\\`import {number} from \"@jashkenas/inputs\"\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"viewof h = number()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"h","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"viewof h1 = number({placeholder: \"13+\", title: \"Your Age\", submit: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"h1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"function number(config = {}) {\n const {value, title, description, placeholder, submit, step, min, max} = config;\n if (typeof config == \"number\") value = config;\n const form = input({\n type: \"number\", title, description, submit,\n attributes: {value, placeholder, step, min, max},\n getValue: (input) => input.valueAsNumber\n });\n form.output.remove();\n form.input.style.width = \"auto\";\n form.input.style.fontSize = \"1em\";\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1626,"value":"md`---\n## Passwords\n\n\\`import {password} from \"@jashkenas/inputs\"\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1629,"value":"viewof i = password({value: \"password\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1635,"value":"i","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1638,"value":"viewof i1 = password({\n title: \"Your super secret password\", \n description: \"Less than 12 characters, please.\",\n minlength: 6,\n maxlength: 12\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1641,"value":"i1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1624,"value":"function password(config = {}) {\n const {\n value,\n title,\n description,\n autocomplete = \"off\",\n maxlength,\n minlength,\n pattern,\n placeholder,\n size,\n submit\n } = config;\n if (typeof config == \"string\") value = config;\n const form = input({\n type: \"password\",\n title,\n description,\n submit,\n attributes: {\n value,\n autocomplete,\n maxlength,\n minlength,\n pattern,\n placeholder,\n size\n }\n });\n form.output.remove();\n form.input.style.fontSize = \"1em\";\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"md`---\n## TK (Patches welcome!)\n\n* 2D coordinate input (using a <canvas>)\n* 3D coordinate input (for say, positioning a camera in a WebGL sketch)\n* Degrees or radians input, for circular things.\n* Other useful formatting options.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1475,"value":"d3format = require(\"d3-format\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"md`*Clip art courtesy [ClipArt ETC](https://etc.usf.edu/clipart/), radio buttons and checkboxes courtesy [Amit Sch](https://beta.observablehq.com/@meetamit/multiple-choice-inputs).*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 44:"$43:body"