Guidelines
Guidelines
Usage
A Textarea should:
- Have its width and height reflect the amount of content that is expected to be entered.
- Have its default height cut a row aligned to be half of the line height of the last row to more clearly indicate that the content continues.
- Be grouped with its form components inside a form. Headlines can be used to clarify the content of a group.
- Have it's resizable property switched 'on' when the component is desired to be vertically resizeable for fitting longer passages of content more easily.
Sizing in Figma
The Textarea has been built in Figma using the size constraints to make resizing and making it fit designs easier. As a result of this though the invalid property changes the height of the component. When the invalid property is switched on the height of the component is required to be adjusted to compensate for the validation message and its spacing, which is 27 pixels.
Textarea vs. Input
A Textarea should:
- Be used for long pieces of text where sentences or even paragraphs can be input.
An Input should:
- Be used for inputting simple textual content like names, emails, and passwords.
States
The states of the Textarea change when the user engages with it and/or when an outside condition affects it.
A Textarea should:
- Use disabled when the Textarea is temporarily inaccessible, but when it has the prospect to be enabled in a different setting.
- Be set to read-only when the content, or sensitive information like a user name, can not be edited directly in its context.
- Only automatically focus the Textarea on page load when a user expects it. With autofocus assigned, a screen reader immediately directs users to the form control without warning them.
Label
A Textarea's label communicates what should be entered into it.
A label should:
- Indicate a distinct input.
- Be short.
- Use sentence-case for optimal readability.
- Never include interactive elements like a link or button as they are considered inaccessible by assistive technologies.
Help text
A Textarea's help text provides extra guidance or instructions to the user. It can also clarify how the information will be used.
A help text should:
- Be used when extra guidance or instructions are beneficial.
- Be supplementary to the label, not repeating it.
- Use sentence-case for optimal readability.
Placeholder
A Textarea's placeholder is an example of the input the user should enter.
A placeholder should:
- Indicate that the Textarea is empty.
- Be used only to provide an example of what the user should enter.
- Be as short and clear as possible.
- Be supplementary to the label and help text, not repeating it.
- Be used in conjunction with a label.
- Be considered temporary and should not be relied on when it comes to instructing what information the user is required to enter. Label and help text should be used to instruct on the type of information that is to be entered.
Form validation
A Textarea should:
- Be set to required if entering information is required to submit a form.
- Be marked as “Required” when most of the fields in the same form are optional.
- Be marked as "Optional" when most of the fields in the same form are required.
- Update its validation state when the form is submitted. And after submitting as soon as the user interacts with the component.
- Have a validation message that is supplementary to the Textarea's label and help-text without repeating them.
- Instruct how to avoid possible errors with a validation message.
- Have the validation message be as short and clear as possible.