Observable Framework 1.5.1 GitHub️ 1.8k

Text area input

API · Source · The textarea input allows freeform multi-line text entry. For a single line, see the text input.

In its most basic form, a textarea is a blank box whose value is the empty string. The textarea’s value changes as the user types into the box.

const text = view(Inputs.textarea());
text

We recommend providing a label and placeholder to improve usability. You can also supply an initial value if desired. The label may be either a text string or an HTML element, if more control over styling is desired.

const bio = view(Inputs.textarea({label: "Biography", placeholder: "What’s your story?"}));
bio

If the input will trigger some expensive calculation, such as fetching from a remote server, the submit option can be used to defer the textarea from reporting the new value until the user clicks the Submit button or hits Command-Enter. The value of submit can also be the desired contents of the submit button (a string or HTML).

const essay = view(Inputs.textarea({label: "Essay", rows: 6, minlength: 40, submit: true}));
essay

The HTML5 spellcheck, minlength, and maxlength options are supported. If the user enters invalid input, the browser may display a warning (e.g., “Use at least 80 characters”).

To prevent a textarea’s value from being changed, use the disabled option.

const fixed = view(Inputs.textarea({label: "Fixed value", value: "Can’t edit me!", disabled: true}));
fixed

Options

Inputs.textarea(options)

The available text area options are:

If validate is not defined, text.checkValidity is used. While the input is not considered valid, changes to the input will not be reported.