Textarea allows users to provide multiple lines of text.
Textareas allow for multiple lines of text and function very similarly to Text Fields with the addition of the rows property, which determines how tall the input will be.
When to use
- Do use a textarea field to allow users to input a longer, multi-line string of characters
When not to use
- Don't use a textarea field when the user is likely to enter a short response that could fit into a standard text field.
Availabile platforms
|
Platform |
Available |
|---|---|
|
Figma |
✓ |
|
Web (@ovotech/element) |
✓ |
|
App (@ovotech/element-native) |
✓ |
How to use it
Hint Text
Hint text should appear below the label and above the input. Do not use placeholders.
Errors
Error messages should appear above the input, and below the label and help text. These should be written in a concise, specific, way using plain language and without pleasantries.
Custom number of rows
Set a custom number of rows to show if the default is not right for the content users are expected to enter.
Resizable
In some cases it can be useful to set the textarea to be resizable if it is not clear how much text will be entered.
Properties
|
Name |
Values |
Default |
|---|---|---|
|
Accepts all FieldProps |
FieldProps |
|
|
rows |
Number |
3 |
|
resizable |
Boolean |
false |
|
... |
JSX.IntrinsicElements["textarea"] |
|
Related components
Checking for accessibility
User stories
The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.
- As someone using the component, I want to be able to understand the information required from me.
- As someone with a cognitive disability, I want to be able to understand if any personal information is required, for example whether it's my full address.
- As someone with a cognitive disability, I want to be able to understand any errors related to the text area field, as well as how to resolve the error.
- As a keyboard-only user, I want to be able to navigate to the text area field using the Tab key.
- As a screen reader user, I want the label relating to the text area field to be announced when navigating to the field.
- As a screen reader user, I want the hint text provided alongside the text area field's label to be announced when navigating to the field.
- As a screen reader user, I want any error messages relating to the text area field to be announced when they become present.
- As a voice-control user, I want to be able to navigate to the text area field using the associated label.
Test steps
Use these steps to check that the Textarea field component has been implemented correctly:
- Turn on a screen reader.
- Navigate to the text area field using the Tab key.
- Verify that the text area field has a visible label.
- Verify that a name for the text area field is announced and that it includes the visible label.
If any errors appear when the form is validated, complete the following checks:
- Turn on a screen reader.
- Verify that when an error message appears after the form has been submitted, that the error is included in the ErrorSummary component.
- Navigate to the text area field using the Tab key.
- Verify that once the text area field receives focus, that there is an announcement to convey that there is an error with this field.
Related patterns
External links
- xxx