Use a textarea when the expected user input is multiple line of text. They are commonly used in forms.
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.
import Textarea from '@nib-components/textarea';
<Textarea/> is wrapped in a
<FormControl/>, all FormControl props such as
disabled will be passed down to this component. This includes the
label which will align with the
for attribute on the
All props passed directly to
<Textarea/> will be applied to the underlying
<input> as attributes.
Labels help the user understand what information to enter into the textarea field. Labels are short, concise and use sentence-style capitalisation.
Denote optional fields by adding
“(Optional)" to the end of the textarea label.
- Labels must be visible when a textarea is in focus.
- Labels must be announced to the screen reader on focus.
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 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.
- Help text displayed above the textarea field allows screen readers to read the help information before the user completes a field.
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.
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.
- 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.”.