Textarea

Several lines of text with a label, help and error.

<mm-textarea name="description" label="Description" rows="4" maxlength="500" autosize
  help="Shown at the top of the asset page."></mm-textarea>

Guidance

Textareas take several lines: descriptions, documentation notes, review comments. autosize grows the field with its content instead of scrolling, maxlength adds a character counter, and mono sets the text in mono for machine strings such as a list of MRNs or a JSON payload.

Form-associated: submits value under name, validates required, minlength and maxlength, resets with the form and is disabled by a disabled fieldset.

Properties

Property	Attribute	Type	Default	Description
value	value	string	''	The current value. The value attribute is the default the form resets to.
placeholder	placeholder	string	''
rows	rows	number	3	Visible rows; the minimum height when autosize is set.
autosize	autosize	boolean	false	Grows with the content instead of scrolling.
minlength	minlength	number | undefined
maxlength	maxlength	number | undefined		Maximum length; also shows a counter.
readonly	readonly	boolean	false
mono	mono	boolean	false	Sets the text in mono, for machine strings.
label	label	string	''	Field label. Rendered above the control unless hide-label, and always the accessible name.
help	help	string	''	Help text under the control.
error	error	string	''	Error text: a sentence saying what to fix. Shows the crimson border, an icon and sets aria-invalid.
hideLabel	hide-label	boolean	false	Hides the label visually; it stays the accessible name.
optional	optional	boolean	false	Marks the field as optional, in words.
name	name	string	''	Name submitted with the form.
disabled	disabled	boolean	false	Disables the control and excludes it from submission.
required	required	boolean	false	Requires a value before the form submits.
form		HTMLFormElement | null
validity		ValidityState
validationMessage		string
willValidate		boolean
isDisabled		boolean		True when disabled directly or by a disabled ancestor fieldset.

Methods

Method	Description
formResetCallback()	Restore the initial value when the owning form resets.

Events

Event	Detail	Description
mm-input	CustomEvent<MmValueDetail>	On every edit.
mm-change	CustomEvent<MmValueDetail>	When the value is committed (blur after editing).
input	InputEvent	Native, composed; on every edit.
change	Event	Native, re-dispatched on the host when the value is committed.

CSS parts

Part	Description
label	The label.
control	The bordered box.
textarea	The native textarea.
help	The help line.
error	The error line.
counter	The character counter.

Examples

Every state of mm-textarea in Storybook, with keyboard and screen reader tests.