Textarea

Updated:

Use for multi-line text input like messages, comments, or lengthy descriptions.

Slots

The q2-textarea element has one slot that can be used to insert custom content into the component.

Learn more about slots

An optional slot to display a custom label.

Properties

The q2-textarea element has one or more properties that support text localization. Those properties are indicated by the localizable badge in the description.

Learn more about properties.

cols

Defines the number of columns displayed in the field. If not set, the field will be full-width and respond to the window size.

disabled

Indicates the field cannot be focused or interacted with.

errors

Each item in the errors array will appear below the input field when the field is focused.

Localizable
hideLabel
hide-label

Hide's the field's <label> element from view.

Only use when a visible label is impractical.

hideMessages
hide-messages

When true and the input field has an active validation error, the field shows the error state without displaying associated error messages below the field (from the errors array above). Primarily used for dropdown selects and date pickers whose controls appear below the input field (where the error messages, if displayed, would also appear).

hints

Each item in the hints array will appear below the input field when the field is focused.

The errors array takes precedence over the hints array. If an input field has both hints and errors, only the errors will display. Once all errors are resolved, the hints display the next time the field is focused.

Localizable
label

The label that appears above the field. This is announced by screen readers when the field is focused.

Localizable
maxlength

Defines the maximum allowed input length in characters. Formatting characters (e.g. ., -, etc) are included in the maxlength comparison. Make sure you account for them when setting the maxlength value.

Please set the rows attribute in correlation with maxlength to show as much text as possible in the field viewport.

optional

Appends "(optional)" to the field label, and sets aria-required on the nested input tag to false.

placeholder

Text that appears within the field when it is blurred and empty. Placeholder text disappears when the user focuses on the field and provides input.

Primarily used for rare cases in which a visible form label is not expected (e.g., search fields).

Localizable
readonly

Appends "(read only)" to the field label, and field becomes unusable, but remains focusable. Takes priority over optional if both are true.

resize

Indicates how the field is resizable.

rows

Defines the number of rows displayed in the field.

spellcheck

Determines whether the field is subject to spell-checking by the underlying browser or OS.

value

The value of the field.

Events

The q2-textarea element exposes events that can be used to send and receive data from the component based on user interaction.

Learn more about events.

change

Emitted when the field loses focus after the value has been changed.

Event Detail Type signature

{ value: string; }

If an event handler is bound to the element using:

  • onchange property - The default handler will not fire, and the value must be updated in the custom handler.
  • addEventListener("change") method - The default handler will fire alongside the custom handler.

input

Emitted when the field value is updated.

Event Detail Type signature

{ value: string; }

If an event handler is bound to the element using:

  • oninput property - The default handler will not fire, and the value must be updated in the custom handler.
  • addEventListener("input") method - The default handler will fire alongside the custom handler.

tctChange

Emitted when the field loses focus after the value has been changed.

Event Detail Type signature

{ value: string; }

tctInput

Emitted when the field value is updated.

Event Detail Type signature

{ value: string; }

Methods

The q2-textarea element exposes methods that can be used to perform various actions on the component.

Learn more about methods.

setValue

Test only

Emulates focusing the <textarea>, centering the provided value, and emitting an input event.

This method leaves the focus on the <textarea> and as a result does not trigger the change event. If you want to trigger the change event, move the focus to another element after calling this method.

Type signature

setValue(value: string) => Promise<void>

Accessibility

Accessibility Report

Tecton components are designed and tested to be WCAG compliant when used appropriately, and do not get released without proper validation. Developers should prefer not to set ARIA attributes when using components from the Tecton Design System.

CSS Variables

The following CSS variables are available to override the default theme styles of the q2-textarea component.

Dependencies

Many Tecton components consume other components to maintain visual and functional consistency. If you are looking for a CSS variable you think should exist but are not seeing it, it may be defined in one of the dependent components below. Either way, if you think it's something we should expose more conveniently, let us know!