Textarea
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
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files | coc-card-item.js
Functional grouping: Forms
Demo
Configure: select the dropdowns below to display the variety of options that a textarea input supports.
Code
Responsive preview
Usage best practices
Consider using text input when:
- users need to enter more than a single line of text
Do
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.
Don't
Do not use placeholder text instead of labels.