Textarea
Use a textarea when the expected user input is multiple line of text. They are commonly used in forms.
Installation
npm install @nib-components/textarea
As a form input, @nib-components/form-control must wrap this component to provide an accessible label, help text, and validation styling.
Usage
import Textarea from '@nib-components/textarea';
Interactive demo
Props
As the <Textarea/> is wrapped in a <FormControl/>, all FormControl props such as valid, validated, and disabled will be passed down to this component. This includes the id, name and label which will align with the for attribute on the <label>.
All props passed directly to <Textarea/> will be applied to the underlying <input> as attributes.
Labels
Labels help the user understand what information to enter into the textarea field. Labels are short, concise and use sentence-style capitalisation.
Optional inputs
Denote optional fields by adding “(Optional)" to the end of the textarea label.
Accessibility best practices for labels
- Labels must be visible when a textarea is in focus.
- Labels must be announced to the screen reader on focus.
Placeholder text
Avoid using placeholder text in textareas. Placeholder text is not accessible due to low colour contrast and the disappearing placeholder text requires the user to rely on their short-term memory to complete the field correctly. Placeholder text can also be mistaken as a default value causing the user to skip the field completely.
Help text should be used in place of placeholder text to communicate supporting instructions.
Help text
Help text is an instruction that supports a user to fill out a textarea field. It can also be used to clarify how the information will be used. It is optional and should only be used where needed.
Help text should appear below the label and above the textarea field. Use sentence-style capitalisation and concise sentence/s.
Accessibility best practices for help text
- Help text displayed above the textarea field allows screen readers to read the help information before the user completes a field.
Textarea height
The height of the textarea should reflect the expected amount of information to be provided. This visual cue gives the user a hint as to how much text to enter.
Validation and errors
Textarea validation should happen in real-time so the user can fix input errors when they occur. The success state should appear when the input is valid and the error state should appear when the input is invalid.
The success state is denoted with a green border on the bottom of the textarea field and a green success icon.
The error state is denoted with a red border, a red error icon and a red error message below the textarea field. A good error message clearly describes how to address the input error. The error state only appears when the user clicks/taps away from the textarea field. Once the user corrects the textarea input error, the error state is replaced with the success state.
Accessibility best practices for validation and errors
- Validation states must not rely on colour alone to convey the error information as users with visual impairments may skip over this information. Using colour and an appropriate icon is recommended.
- Add the
requiredattribute to the textarea field if it's a required field. - To help screen reader users, the error message should include a hidden ‘Error:’ before the error message. These users will hear, for example, “Error: Please enter your email address.”.