InputTextarea
InputTextarea adds styling and autoResize functionality to standard textarea element.
When to use
- Text area enable users to enter free-form text data. It can be used for long and multi-line entries.
Guidelines
General
- Provide clear, always visible labels for particular field.
- Use short and descriptive labels (a word or two) so users can quickly scan it.
- Text area can be adjustable and resizable if required.
- Use hint text to help users fill in fields. They can provide instructions for expected values or formatting help.
- The required fields and instructions should be made clear to all users.
- Look to minimize the number of disabled fields.
- Placeholder text is not a substitute for a label.
Basic
The textarea component is achieved by using the <textarea> tag, which allows the user to enter long forms of text.
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="4"></textarea>
Disabled
When disabled is present, the element cannot be edited.
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="4" disabled></textarea>
Invalid
The 'invalid' class is used to add an invalid state style to indicate a failed validation.
Textarea field is mandatory
<label for="exampleFormControlTextarea1" class="form-label">Example textarea <span class="asterisk">*</span></label>
<textarea class="form-control invalid input-textarea" id="exampleFormControlTextarea1" rows="4" ></textarea>
<div class="invalidtext-wrapper">
<span class="invalidtext">Textarea field is mandatory</span>
</div>
Accessibility
- Text area should have a clear visible focus.
- The label tag has the universal browser and screen reader support.
- Mouse users can click label to focus on the input control.
- Using the help text will add an aria-describedby attribute to associate descriptive text to the form control.
- if semantic code is not used for label then aria-label can be provided for the screen reader to read.