textarea

A multi-line <textarea>.

{
  fields: [
    {
      name: 'summary',
      kind: 'textarea',
      displayName: 'Summary',
      placeholder: 'Enter inserts a newline only when allowNewlines is set',
      allowNewlines: true,
    },
  ],
}

Rendered form

Values

—

Options

Option	Type	Notes
placeholder	Reactive<string>	Literal, or a function of the form context
allowNewlines	boolean	Whether Enter inserts a newline. Default false

Plus everything in the shared options.

allowNewlines and the Enter key

This is the one option you should read carefully, because the default is probably not what you expect.

In a dialog, Enter normally confirms. A textarea needs the same key, so the rule is written out:

allowNewlines	Enter inside the textarea
true	Inserts a line break
false (default)	Nothing happens: no line break is inserted, and the dialog is not confirmed

The default does nothing on purpose, instead of confirming. A textarea usually means the user is in the middle of writing. Closing the dialog under their hands because they pressed Enter while writing is worse than ignoring the key.

// Long-form prose: let Enter do the obvious thing.
{ name: 'notes', kind: 'textarea', allowNewlines: true }

// A mostly one-line field that only needs room to wrap.
{ name: 'summary', kind: 'textarea' }

Note that Enter only ever confirms a dialog that has exactly one button. In a dialog with several buttons it is ignored everywhere, inside a textarea or not. See Buttons.

Values

getValue() returns the current text, including line breaks. The empty value is ''.