30:T45a,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\`](#sliderDemo) * [\`button\`](#buttonDemo) * [\`select\`](#selectDemo) * [\`autoSelect\`](#autoSelectDemo) * [\`color\`](#colorDemo) * [\`coordinates\`](#coordinatesDemo) * [\`worldMapCoordinates\`](#worldMapCoordinatesDemo) * [\`usaMapCoordinates\`](#usaMapCoordinatesDemo) * [\`date\`](#dateDemo) * [\`time\`](#timeDemo) * [\`file\`](#fileDemo) * [\`text\`](#textDemo) * [\`textarea\`](#textareaDemo) * [\`radio\`](#radioDemo) * [\`checkbox\`](#checkboxDemo) * [\`number\`](#numberDemo) * [\`password\`](#passwordDemo)`31:Ta02,md`|

Friends & Family:

| | |---|---| | **[@mbostock/form-input](/@mbostock/form-input)** | Fully custom forms, combining inputs into a single reactive cell. | | **[@mbostock/scrubber](/@mbostock/scrubber)** | A slider that automatically plays through its range, useful for driving and scrubbing through animations. | | **[@bumbeishvili/input-groups](/@bumbeishvili/input-groups)** | A wrapper function that can put many of these inputs into a more compact grid layout. | | **[@zechasault/color-schemes-and-interpolators-picker](/@zechasault/color-schemes-and-interpolators-picker)** | Color scheme and interoplation pickers. | | **[@awhitty/fips-county-code-brush](/@awhitty/fips-county-code-brush)** | A brushable map of the United States, allowing you to quickly select sets of counties to get their FIPS codes. | | **[@mootari/range-slider](https://observablehq.com/@mootari/range-slider)** | True range sliders, setting both a minimum and maximum value. | | **[@bumbeishvili/data-driven-range-sliders](/@bumbeishvili/data-driven-range-sliders)** | Data-driven range sliders, displaying a distribution histogram of the underlying data. | | **[@trebor/snapping-histogram-slider](/@trebor/snapping-histogram-slider)** | Another data-driven range slider option. | | **[@mootari’s 2D Slider](https://observablehq.com/d/98bbb19bf9e859ee)** | Two dimensional sliders, exploring discrete points on a plane. | | **[@yurivish/ternary-slider](/@yurivish/ternary-slider)** | Nifty ternary plot inputs, describing the percentages of a whole composed of exactly three things. | | **[@rreusser/binary-input](/@rreusser/binary-input)** | Input numbers in binary, great for working with values where results vary with specific bit positions. | | **[@bartok32/diy-inputs](/@bartok32/diy-inputs)** | A fun tool for defining your own fancy and colorful inputs. | | **[@bobkerns/elements-input](/@bobkerns/elements-input)** | A periodic table of the elements input! You can construct molecules programmatically, or click on the table to create formulas. | | **[@fil/selectflat](/@fil/selectflat)** | A fast selector to explore a discrete parameter space. The value changes on mouseover, and sticks when you click. | | **[@oscar6echo/player](/@oscar6echo/player)** | A slider with buttons to play, pause, step, and change speed and direction — useful for animations. |
*If you have any improvements for the bazaar, [please make your change in a fork and send it to me as a suggestion.](https://observablehq.com/@observablehq/suggestions-and-comments)*`32:T477,function select(config = {}) { let { value: formValue, title, description, disabled, submit, multiple, size, options } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "object" ? o : { value: o, label: o } ); const form = input({ type: "select", title, description, submit, attributes: { disabled }, 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(); return form; }33:T497,function autoSelect(config = {}) { const { value, title, description, disabled, autocomplete = "off", placeholder, size, options, list = "options" } = Array.isArray(config) ? { options: config } : config; const optionsSet = new Set(options); const form = input({ type: "text", title, description, attributes: { disabled }, action: fm => { fm.value = fm.input.value = value || ""; fm.onsubmit = e => e.preventDefault(); fm.input.oninput = function(e) { e.stopPropagation(); fm.value = fm.input.value; if (!fm.value || optionsSet.has(fm.value)) fm.dispatchEvent(new CustomEvent("input")); }; }, form: html` ` }); form.output.remove(); return form; }34:T522,function coordinates(config = {}) { const { value = [], title, description, submit } = Array.isArray(config) ? { value: config } : config; let [lon, lat] = value; lon = lon != null ? lon : ""; lat = lat != null ? lat : ""; const lonEl = html``; const latEl = html``; const form = input({ type: "coordinates", title, description, submit, getValue: () => { const lon = lonEl.valueAsNumber; const lat = latEl.valueAsNumber; return [isNaN(lon) ? null : lon, isNaN(lat) ? null : lat]; }, form: html` ` }); form.output.remove(); return form; }35:T8c0,function worldMapCoordinates(config = {}) { const { value = [], title, description, width = 400 } = Array.isArray(config) ? {value: config} : config; const height = Math.round((210 / 400) * width); let [lon, lat] = value; lon = lon != null ? lon : null; lat = lat != null ? lat : null; const formEl = html``; const context = DOM.context2d(width, height); const canvas = context.canvas; canvas.style.margin = "10px 0 3px"; const projection = d3geo .geoNaturalEarth1() .precision(0.1) .fitSize([width, height], { type: "Sphere" }); const path = d3geo.geoPath(projection, context).pointRadius(2.5); formEl.append(canvas); function draw() { context.fillStyle = "#fff"; context.fillRect(0, 0, width, height); context.beginPath(); path(graticule); context.lineWidth = 0.35; context.strokeStyle = `#ddd`; context.stroke(); context.beginPath(); path(land); context.fillStyle = `#f4f4f4`; context.fill(); context.beginPath(); path(countries); context.strokeStyle = `#aaa`; context.stroke(); if (lon != null && lat != null) { const pointPath = { type: "MultiPoint", coordinates: [[lon, lat]] }; context.beginPath(); path(pointPath); context.fillStyle = `#f00`; context.fill(); } } canvas.onclick = function(ev) { const { offsetX, offsetY } = ev; var coords = projection.invert([offsetX, offsetY]); lon = +coords[0].toFixed(2); lat = +coords[1].toFixed(2); draw(); canvas.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; draw(); const form = input({ type: "worldMapCoordinates", title, description, display: v => html`

Longitude: ${lon != null ? lon.toFixed(2) : ""} Latitude: ${lat != null ? lat.toFixed(2) : ""}

`, getValue: () => [lon != null ? lon : null, lat != null ? lat : null], form: formEl }); return form; }36:T8bb,function usaMapCoordinates(config = {}) { const { value = [], title, description, width = 400 } = Array.isArray(config) ? {value: config} : config; const scale = width / 960; const height = scale * 600; let [lon, lat] = value; lon = lon != null ? lon : null; lat = lat != null ? lat : null; const formEl = html``; const context = DOM.context2d(width, height); const canvas = context.canvas; canvas.style.margin = "5px 0 20px"; const projection = d3geo .geoAlbersUsa() .scale(1280) .translate([480, 300]); const path = d3geo .geoPath() .context(context) .pointRadius(2.5 / scale); formEl.append(canvas); function draw() { context.clearRect(0, 0, width, height); context.save(); context.scale(scale, scale); context.lineWidth = 0.35 / scale; context.beginPath(); path(nation); context.fillStyle = `#f4f4f4`; context.fill(); context.beginPath(); path(states); context.strokeStyle = `#aaa`; context.stroke(); if (lon != null && lat != null) { const pointPath = { type: "MultiPoint", coordinates: [projection([lon, lat])] }; context.beginPath(); path(pointPath); context.fillStyle = `#f00`; context.fill(); } context.restore(); } canvas.onclick = function(ev) { const { offsetX, offsetY } = ev; var coords = projection.invert([offsetX / scale, offsetY / scale]); lon = +coords[0].toFixed(2); lat = +coords[1].toFixed(2); draw(); canvas.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; draw(); const form = input({ type: "worldMapCoordinates", title, description, display: v => html`

Longitude: ${lon != null ? lon : ""} Latitude: ${lat != null ? lat : ""}

`, getValue: () => [lon != null ? lon : null, lat != null ? lat : null], form: formEl }); return form; }37:T4e2,function radio(config = {}) { let { value: formValue, title, description, submit, options, disabled } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "string" ? { value: o, label: o } : o ); const form = input({ type: "radio", title, description, submit, getValue: input => { if (input.checked) return input.value; const checked = Array.prototype.find.call(input, radio => radio.checked); return checked ? checked.value : undefined; }, form: html` ` }); form.output.remove(); return form; }38:T4fb,function checkbox(config = {}) { let { value: formValue, title, description, submit, disabled, options } = Array.isArray(config) ? { options: config } : 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; }39:T906,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.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 = typeof format === "function" ? 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(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }3a:[{"id":"c051fbc024553912e31968b35e537d4ad3592201b5f8e7bd13fd9d02e38599c5d541a704d0858c676328babb3e5c9c35dd7c6d67240090d094882a1cad8eece4","href":"https://static.observableusercontent.com/files/c051fbc024553912e31968b35e537d4ad3592201b5f8e7bd13fd9d02e38599c5d541a704d0858c676328babb3e5c9c35dd7c6d67240090d094882a1cad8eece4","name":"capstan.gif","type":"image/gif","lastModified":1593267302850.62,"size":90036}] 2e:{"title":"Inputs","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2133,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"sliderDemo = md`---\n## Sliders\n\n~~~js\nimport {slider} from \"@jashkenas/inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"viewof a = slider()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":2106,"value":"viewof a1_1 = slider({\n min: 0, \n max: 1, \n step: 0.01, \n format: v => `${Math.round(100 * v)} per cent`,\n description: \"Zero to one, formatted with a custom function\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":1591,"value":"md`More [fancy slider techniques](https://beta.observablehq.com/@mootari/prime-numbers-slider).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"function slider(config = {}) {\n let {\n min = 0,\n max = 1,\n value = (max + min) / 2,\n step = \"any\",\n precision = 2,\n title,\n description,\n disabled,\n getValue,\n format,\n display,\n submit\n } = typeof config === \"number\" ? { value: config } : config;\n precision = Math.pow(10, precision);\n if (!getValue)\n getValue = input => Math.round(input.valueAsNumber * precision) / precision;\n return input({\n type: \"range\",\n title,\n description,\n submit,\n format,\n display,\n attributes: { min, max, step, disabled, value },\n getValue\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"buttonDemo = md`---\n## Buttons\n\n~~~js\nimport {button} from \"@jashkenas/inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":685,"value":"viewof b = button()","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"{\n b\n return !this;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":714,"value":"{\n b1;\n return new Date(Date.now()).toUTCString()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"function button(config = {}) {\n const {\n value = \"Ok\", title, description, disabled\n } = typeof config === \"string\" ? {value: config} : config;\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"},{"id":913,"value":"selectDemo = md`---\n## Dropdown Menus and Multiselects\n\n~~~js\nimport {select} from \"@jashkenas/inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":918,"value":"viewof dd = select([\"Spring\", \"Summer\", \"Fall\", \"Winter\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"dd","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":955,"value":"dd1","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":986,"value":"dd2","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1527,"value":"dd3","pinned":false,"hidden":false,"mode":"ojs"},{"id":922,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2114,"value":"autoSelectDemo = md`---\n## Autoselects\n*A variant of an option menu, using an autocompleting text input, via HTML’s datalist element.* \n\n~~~js\nimport {autoSelect} from \"@jashkenas/inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2112,"value":"viewof as = autoSelect({\n options: usa.objects.states.geometries.map(d => d.properties.name),\n placeholder: \"Search for a US state . . .\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2111,"value":"as","pinned":false,"hidden":false,"mode":"ojs"},{"id":2110,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"colorDemo = md`---\n## Color Pickers\n\n*value: a hexadecimal string, e.g. * \\`\"#bada55\"\\` \n\n~~~js\nimport {color} from \"@jashkenas/inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"viewof c = color()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":130,"value":"function color(config = {}) {\n const { value = \"#000000\", title, description, disabled, submit, display } =\n typeof config === \"string\" ? { value: config } : config;\n const form = input({\n type: \"color\",\n title,\n description,\n submit,\n display,\n attributes: { disabled, value }\n });\n // The following two lines are a bugfix for Safari, which hopefully can be removed in the future.\n form.input.value = '';\n form.input.value = value;\n if (title || description) form.input.style.margin = \"5px 0\";\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1694,"value":"coordinatesDemo = md` ---\n## Coordinates\n\n*value: an array pair of \\`[longitude, latitude]\\`, e.g. * \\`[-122.27, 37.87]\\` \n\n~~~js\nimport {coordinates} from \"@jashkenas/inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1784,"value":"viewof coords1 = coordinates()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1786,"value":"coords1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1706,"value":"viewof coords2 = coordinates({\n title: \"Hometown\",\n description: \"Enter the coordinates of where you were born\",\n value: [-122.27, 37.87],\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1740,"value":"coords2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1698,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1827,"value":"worldMapCoordinatesDemo = md` ---\n## World Map Coordinates\n\n*value: an array pair of \\`[longitude, latitude]\\`, e.g. * \\`[-122.27, 37.87]\\` \n\n~~~js\nimport {worldMapCoordinates} from \"@jashkenas/inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1834,"value":"viewof worldMap1 = worldMapCoordinates([-122.27, 37.87])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1916,"value":"worldMap1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1829,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1967,"value":"usaMapCoordinatesDemo = md` ---\n## U.S.A. Map Coordinates\n\n*value: an array pair of \\`[longitude, latitude]\\`, e.g. * \\`[-122.27, 37.87]\\` \n\n~~~js\nimport {usaMapCoordinates} from \"@jashkenas/inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1985,"value":"viewof usaMap1 = usaMapCoordinates([-122.27, 37.87])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1986,"value":"usaMap1","pinned":false,"hidden":false,"mode":"ojs"},{"id":2032,"value":"viewof usaMap2 = usaMapCoordinates({\n title: \"A Mini Map\",\n description: \"Defaults to New York City\",\n width: 200,\n value: [-74, 40.71]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2049,"value":"usaMap2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1982,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"dateDemo = md` ---\n## Dates\n\n*value: a YYYY-MM-DD formatted string: * \\`\"2016-11-08\"\\` \n\n~~~js\nimport {date} from \"@jashkenas/inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"viewof d = date()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":200,"value":"function date(config = {}) {\n const { min, max, value, title, description, disabled, display } =\n typeof config === \"string\" ? { value: config } : config;\n return input({\n type: \"date\",\n title,\n description,\n display,\n attributes: { min, max, disabled, value }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2101,"value":"timeDemo = md` ---\n## Times\n\n*value: a HH:MM:SS formatted string: * \\`\"09:30:45\"\\`\n
*(Time values are always in 24-hour format)*\n\n~~~js\nimport {time} from \"@jashkenas/inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2100,"value":"viewof t = time()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2099,"value":"t","pinned":false,"hidden":false,"mode":"ojs"},{"id":2098,"value":"viewof t1 = time({\n title: \"Afternoon\",\n min: \"12:00:00\",\n max: \"23:59:59\",\n value: \"13:00:00\",\n step: 1,\n description: \"Only times after noon are allowed, and seconds are included\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2097,"value":"t1","pinned":false,"hidden":false,"mode":"ojs"},{"id":2096,"value":"function time(config = {}) {\n const { min, max, step, value, title, description, disabled, display } =\n typeof config === \"string\" ? { value: config } : config;\n const el = input({\n type: \"time\",\n title,\n description,\n display,\n getValue: d => (d.value ? d.value : undefined),\n attributes: { min, max, step, disabled, value }\n });\n el.output.remove();\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"fileDemo = 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"},{"id":257,"value":"viewof e = file()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1701,"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"},{"id":252,"value":"function file(config = {}) {\n const { multiple, accept, title, description, disabled } = config;\n const form = input({\n type: \"file\",\n title,\n description,\n attributes: { multiple, accept, disabled },\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"},{"id":433,"value":"textDemo = md`---\n## Text Inputs\n\n~~~js\nimport {text} from \"@jashkenas/inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"viewof f = text()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":576,"value":"f1","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":578,"value":"f2","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"function text(config = {}) {\n const {\n value,\n title,\n description,\n disabled,\n autocomplete = \"off\",\n maxlength,\n minlength,\n pattern,\n placeholder,\n size,\n submit,\n getValue\n } = typeof config === \"string\" ? { value: config } : config;\n const form = input({\n type: \"text\",\n title,\n description,\n submit,\n getValue,\n attributes: {\n value,\n autocomplete,\n maxlength,\n minlength,\n pattern,\n placeholder,\n size,\n disabled\n }\n });\n form.output.remove();\n form.input.style.fontSize = \"1em\";\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"textareaDemo = md`---\n## Textareas\n\n~~~js\nimport {textarea} from \"@jashkenas/inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"viewof g = textarea()","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"g","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":617,"value":"g1","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"function textarea(config = {}) {\n const {\n value = \"\",\n title,\n description,\n autocomplete,\n cols = 45,\n rows = 3,\n width,\n height,\n maxlength,\n placeholder,\n spellcheck,\n wrap,\n submit,\n disabled,\n getValue\n } = typeof config === \"string\" ? { value: config } : config;\n const form = input({\n form: html``,\n title,\n description,\n submit,\n getValue,\n attributes: {\n autocomplete,\n cols,\n rows,\n maxlength,\n placeholder,\n spellcheck,\n wrap,\n disabled\n }\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"},{"id":764,"value":"radioDemo = md`---\n## Radio Buttons\n\n~~~js\nimport {radio} from \"@jashkenas/inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":831,"value":"viewof r = radio([\"Lust\", \"Gluttony\", \"Greed\", \"Sloth\", \"Wrath\", \"Envy\", \"Pride\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":835,"value":"r","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":793,"value":"r1","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":840,"value":"checkboxDemo = md`---\n## Checkboxes\n\n~~~js\nimport {checkbox} from \"@jashkenas/inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":858,"value":"viewof ch = checkbox([\"Lust\", \"Gluttony\", \"Greed\", \"Sloth\", \"Wrath\", \"Envy\", \"Pride\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":864,"value":"ch","pinned":false,"hidden":false,"mode":"ojs"},{"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 submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"ch1","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":874,"value":"ch3","pinned":false,"hidden":false,"mode":"ojs"},{"id":844,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"numberDemo = md`---\n## Numbers\n\n~~~js\nimport {number} from \"@jashkenas/inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"viewof h = number()","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"h","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"viewof h1 = number({placeholder: \"13+\", title: \"Your Age\", submit: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"h1","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"function number(config = {}) {\n const {\n value,\n title,\n description,\n disabled,\n placeholder,\n submit,\n step = \"any\",\n min,\n max\n } =\n typeof config === \"number\" || typeof config === \"string\"\n ? { value: +config }\n : config;\n const form = input({\n type: \"number\",\n title,\n description,\n submit,\n attributes: {\n value,\n placeholder,\n step,\n min,\n max,\n autocomplete: \"off\",\n disabled\n },\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"},{"id":1626,"value":"passwordDemo = md`---\n## Passwords\n\n~~~js\nimport {password} from \"@jashkenas/inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1629,"value":"viewof i = password({value: \"password\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1635,"value":"i","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1641,"value":"i1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1624,"value":"function password(config = {}) {\n const {\n value,\n title,\n description,\n disabled,\n autocomplete = \"off\",\n maxlength,\n minlength,\n pattern,\n placeholder,\n size,\n submit\n } = typeof config === \"string\" ? { value: config } : 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 disabled\n }\n });\n form.output.remove();\n form.input.style.fontSize = \"1em\";\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1684,"value":"md`---\n## Wishlist (Send suggestions, please!)\n\n* 3D coordinate input (for say, positioning a camera in a WebGL sketch)\n* Geocoder search with location autocomplete that returns longitude and latitude.\n* Degrees or radians input, for circular things, or angles.\n* A dimensions input, or a box-model input, with margin (and optionally, padding).\n* A map-projection-picker input, rendering little thumbnails of all the d3-geo-projections.\n* Other useful formatting options.\n\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1823,"value":"d3geo = require(\"d3-geo@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1475,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1825,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1820,"value":"world = (await fetch(\"https://cdn.jsdelivr.net/npm/world-atlas@1/world/110m.json\")).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1841,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1840,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1958,"value":"usa = (await fetch(\"https://cdn.jsdelivr.net/npm/us-atlas@^2.1/us/states-10m.json\")).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1961,"value":"nation = topojson.feature(usa, usa.objects.nation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1963,"value":"states = topojson.feature(usa, usa.objects.states)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1845,"value":"graticule = d3geo.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1686,"value":"viewof license = {\n const license = md`License: [MIT](https://opensource.org/licenses/MIT)`;\n license.value = \"MIT\";\n return license;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W3a","stdlib":"1","titling":"auto"}