View in Storybook
Anatomy
Our Textarea shares the same structure as our other form components but has a larger input space to accomodate multi-line text.
- Label (optional): A title for a Textarea to describe its purpose.
- Text: Displays the keyword entry.
- helpMessage (optional): When a label is not required, longer helpful text can be added.
- Controls (optional): Used for when the Textarea is much larger and a user can customise their text entry.
States
Focused
Upon clicking a Textarea, the onFocus state is displayed by default and any placeholder text is removed.
Entered
When keywords have been input, the text colour darkens to highlight this.
Error
Error validation messages appear underneath the Textarea when there has been an invalid input. Any error should be displayed as soon as the user has interacted with the Textarea and removed when interacted with again and the error has been fixed.
Disabled
A disabled Textarea prevents user interaction. It doesn’t appear in the tab order, can’t receive focus, and may not read aloud by a screenreader. If you need the Textarea to display information but be uneditable use readOnly instead.
ReadOnly
A read-only Textarea prevents user modification but its contents can be selectable.
Properties
Textarea offers further props for customisation when necessary within the product UI.
|
helpMessage
A single validation message may be displayed to provide helpful information for a user to complete their task. |
|---|
|
Scroll
The scrollbar appears when the length of the text input is greater than the height of the Textarea component. |
|---|
|
Hidden label
It may sometimes be necessary to hide labels, but label text must still be made available for screen readers. Placeholder text should be made visible in these instances for users to understand what text to input. |
|---|
|
Custom height
Users can customise the height of the input to provide context on how much copy can be entered. The helpMessage can assist by displaying a character count for example. |
|---|
Do's and Don'ts
|
Do |
Don't |
|---|---|
|
✅ Display the label as it provides further context and remains when the user is adding information. This can be hidden when necessary. |
🚫 Remove the label as it incurs accessibility issues. |
|
✅ Use when the expected text input is long. |
🚫 Don’t use when the expected text input is short. Use TextField component instead. |
Also see