The textarea component is a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text.

Component data

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Forms


Configure: select the dropdowns below to display the variety of options that a textarea input supports.



Responsive preview

Usage best practices

Consider using text input when:

  • users need to enter more than a single line of text

Usage examples:

  • response area for an open-ended question

Related components:


Align textarea label with the input field and ensure it is always visible.

Ensure the size of the textarea box reflects the amount of the content user is expected to enter.

Use the character limit and counter to allow users to understand when they are about to reach the character limit.

Ensure labels and descriptions are clear and easy to understand.


Do not use placeholder text instead of labels.