30:[{"id":"eee4d2a928a36026dab4281b76deb7fe0cd885f1c6df6e546efb79db7e5fa5ccc98a395f865d31c1db3344ff1734683764bb1a63871fb1b39f77bb810f49699c","href":"https://static.observableusercontent.com/files/eee4d2a928a36026dab4281b76deb7fe0cd885f1c6df6e546efb79db7e5fa5ccc98a395f865d31c1db3344ff1734683764bb1a63871fb1b39f77bb810f49699c","name":"us-state-capitals.tsv","type":"text/tab-separated-values","lastModified":1612393683348.603,"size":2886}] 2e:{"title":"Text Input / Observable Inputs","cells":[{"id":0,"value":"

Text Input / Observable Inputs

Observable Inputs › Text · API

\n\n# Input: Text\n\nA Text allows freeform single-line text input. (For multiple lines, see [Textarea](/@observablehq/input-textarea)).","pinned":false,"hidden":false,"mode":"md"},{"id":87,"value":"In its most basic form, a Text is a blank box whose value is the empty string. The Text’s value changes as the user types into the box.","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"viewof text = Inputs.text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"text","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"We recommend providing a *label* and *placeholder* to improve usability. You can also supply an initial *value* if desired.","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"viewof name = Inputs.text({label: \"Name\", placeholder: \"Enter your name\", value: \"Anonymous\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"name","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"The *label* may be either a text string or an HTML element, if more control over styling is desired.","pinned":false,"hidden":false,"mode":"md"},{"id":125,"value":"viewof signature = Inputs.text({label: html`Fancy`, placeholder: \"What’s your fancy?\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":204,"value":"For specific classes of text, such as email addresses and telephone numbers, you can supply one of the [HTML5 input types](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types), such as email, tel (for a telephone number), or url, as the *type* option. Or, use a convenience method: Inputs.email, Inputs.password, Inputs.tel, or Inputs.url.","pinned":false,"hidden":false,"mode":"md"},{"id":225,"value":"viewof password = Inputs.password({label: \"Password\", value: \"open sesame\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"password","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"The HTML5 *pattern*, *spellcheck*, *minlength*, and *maxlength* options are also supported. If the user enters invalid input, the browser may display a warning (e.g., “Enter an email address”). You can also check whether the current value is valid by calling [*form*.checkValidity](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-checkvalidity).","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"viewof email = Inputs.text({type: \"email\", label: \"Email\", placeholder: \"Enter your email\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"[email, viewof email.checkValidity()]","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"If the input will trigger some expensive calculation, such as fetching from a remote server, the *submit* option can be used to defer the Text from reporting the new value until the user clicks the Submit button or hits Enter. The value of *submit* can also be the desired contents of the submit button (a string or HTML).","pinned":false,"hidden":false,"mode":"md"},{"id":55,"value":"viewof query = Inputs.text({label: \"Query\", placeholder: \"Search\", submit: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"query","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"To provide a recommended set of values, pass an array of strings as the *datalist* option. For example, the input below is intended to accept the name of a U.S. state; you can either type the state name by hand or click one of the suggestions on focus.","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"capitals = FileAttachment(\"us-state-capitals.tsv\").tsv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"viewof state = Inputs.text({\n label: \"U.S. state\",\n placeholder: \"Enter state name\",\n datalist: capitals.map(d => d.State)\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"state","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"To prevent a Text’s value from being changed, use the *disabled* option.","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"viewof fixed = Inputs.text({label: \"Fixed value\", value: \"Can’t edit me!\", disabled: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"fixed","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}