Textarea

Since 2.6.0 Form-ready since 2.6.0

Show deprecated version

Guidelines

Guidelines

The textarea component allows users to input multi-line text, making it ideal for forms that require longer entries. We typically use textareas in scenarios such as feedback forms, comment sections and message composition.

1. Label
2. Required field indicator
3. Placeholder
4. Container
5. Resize handle
6. Helper or feedback text
7. Counter

Options

• Label: See form field.
• Value: See form field.
• Required: See form field.
• Helper text: See form field.
• Feedback text: See form field.
• Show text as tooltip: See form field.
• Placeholder: See form field.
• Counter: See form field.
• Resize behavior: Determines how textareas can be resized (both directions, horizontally, vertically, or no resizing). Default size is 300px x 100px.
• Columns and width: Defines initial width by number of columns and/or width.
• Rows and height: Defines initial height by number of rows and/or height.

Behavior in context

• Interaction:
  • Clicking in the container enables the editing of the field.
  • Users can type, copy, paste and cut text within textareas.
  • Optional: Users can resize textareas to fit their needs. For example, vertical resizing can be useful in feedback forms when the entry exceeds the default height.
• Validation:
  • Minimum and maximum length defines number of characters allowed.
  • See form validation.
• Overflow: Text within the textarea is not truncated; it supports scrolling for overflow content.
• Alignment: Text is always left-aligned in textareas.
• Sizing:
  • Use columns and rows when you want to define the size of the textarea based on the number of characters (columns) and lines (rows) it can display. This is particularly useful for textareas where the content length is predictable, such as input fields with character limits.
  • Use width and height when you need to specify the exact dimensions of the textarea in terms of pixels, rems or other units. This is ideal for ensuring consistent layout and design across different screen sizes and devices, especially in responsive designs.

States

Textareas have five states: Default, hover, focused, read-only and disabled.

Dos and Don’ts

• Do ensure the textarea size matches the expected input, e.g. 5 to 10 rows for detailed feedback
• Do use the placeholder to give users an example of the expected input
• Do set minimum and maximum character limits to ensure appropriate input length
• Don’t use the textarea for short, single-line input like name or email address, use an input field instead

Related patterns

• Form fields
• Validation
• Layout
• Input

Development

Development

Examples

Basic

PreviewAngularReactVueJavaScript

Disabled

PreviewAngularReactVueJavaScript

Readonly

PreviewAngularReactVueJavaScript

Resize behavior

PreviewAngularReactVueJavaScript

Validation

PreviewAngularReactVueJavaScript

API

Properties

Name

Description and specifications

disabled

Determines if the textarea field is disabled.

Attribute:

disabled

Type:

boolean

Default:

false

helperText

The helper text for the textarea field.

Attribute:

helper-text

Type:

string ｜ undefined

infoText

The info text for the textarea field.

Attribute:

info-text

Type:

string ｜ undefined

invalidText

The error text for the textarea field.

Attribute:

invalid-text

Type:

string ｜ undefined

label

The label for the textarea field.

Attribute:

label

Type:

string ｜ undefined

maxLength

The maximum length of the textarea field.

Attribute:

max-length

Type:

number ｜ undefined

minLength

The minimum length of the textarea field.

Attribute:

min-length

Type:

number ｜ undefined

name

The name of the textarea field.

Attribute:

name

Type:

string ｜ undefined

placeholder

The placeholder text for the textarea field.

Attribute:

placeholder

Type:

string ｜ undefined

readonly

Determines if the textarea field is readonly.

Attribute:

readonly

Type:

boolean

Default:

false

required

Determines if the textarea field is required.

Attribute:

required

Type:

boolean

Default:

false

resizeBehavior

Determines the resize behavior of the textarea field. Resizing can be enabled in one direction, both directions or completely disabled.

Attribute:

resize-behavior

Type:

"both" ｜ "horizontal" ｜ "none" ｜ "vertical"

Default:

'both'

showTextAsTooltip

Determines if the text should be displayed as a tooltip.

Attribute:

show-text-as-tooltip

Type:

boolean ｜ undefined

textareaCols

The width of the textarea specified by number of characters.

Attribute:

textarea-cols

Type:

number ｜ undefined

textareaHeight

The height of the textarea field (e.g. "52px").

Attribute:

textarea-height

Type:

string ｜ undefined

textareaRows

The height of the textarea specified by number of rows.

Attribute:

textarea-rows

Type:

number ｜ undefined

textareaWidth

The width of the textarea field (e.g. "200px").

Attribute:

textarea-width

Type:

string ｜ undefined

validText

The valid text for the textarea field.

Attribute:

valid-text

Type:

string ｜ undefined

value

The value of the textarea field.

Attribute:

value

Type:

string

Default:

''

warningText

The warning text for the textarea field.

Attribute:

warning-text

Type:

string ｜ undefined

Events

Name

Description and specifications

ixBlur

Event emitted when the textarea field loses focus.

Detail:

void

validityStateChange

Event emitted when the validity state of the textarea field changes.

Detail:

ValidityState

valueChange

Event emitted when the value of the textarea field changes.

Detail:

string