Textarea
Text Area is a form element that allows users to input longer data entries in the form of text. It is used for entries that span multiple lines, such as commentaries or descriptions.
Usage guidelines
When to use
- To allow users to input longer, unique entries that cannot be predicted with options from a predefined list.
When not to use
- If users are required to enter only one line of information; use Text input instead.
Writing guidelines
Labels
Text areas should always have a short, clear label. Additional information are optional. Write important, additional information as helper text rather than placeholder text so it won't disappear.
Word length
Keep all labels concise.
Capitalization and punctuation
Write text labels in sentence case and without punctuation.
Overflow
If the text is too long for the container, it will appear cut and be scrollable.
Specifications
Anatomy
- Field area: Container in which a user enters data.
- Label: Suggests the information to input. When a text field is active, it appears above the placeholder text.
- Placeholder text: (optional) Provides hints or example on what to enter. It disappears when users start input their text.
- Icon (left or right): (optional) Describes valid input action and provide access to additional functionality.
- Helper text: (optional) Provides additional assistance to user, e.g. explaining the format of the data to enter.
- Counter: (optional) Indicates the number of characters entered and the total number allowed.
Variants
There are two styling variants for the form elements:
- Line-without background
- Shape-with background
Both styles provide the same functionality so which style should be used depends on the amount of data collected:
- for short form sets use the shape style (e.g., login, newsletter subscription)
- for long form sets use the line style (e.g., insurance information) Note that the form elements should be used consistently and cannot be mixed in the same form set.
Size
Shape variant is available in large and medium size, while Line variant is currently available in large size only.
The height of Text Area can be given a fixed value. Overflowing text will be cut with the option to scroll.
Scrollbar height
You can increase or decrease the height of the scrollbar by modifying its bottom padding value.
Styling
Text inputs are available for both light and dark theme.
| Variant | Style | Background colors |
|---|---|---|
| Line | Dark | White, Zurich White, Light Dove and Dove |
| Line | Light | Dark blue |
| Shape | Dark (shape in Zurich White) | White |
| Shape | Dark (shape in White) | Any brand color or secondary palette color and inclusive colors except for White |
Note: when using a light shape text area on a light background, change the help area (helper text and counter) text color to Zurich Blue so there is enough contrast.
Behavior
Positioning and alignment
Text areas are commonly part of form sets. To read about form sets in detail, please refer to Forms guideline section.
As a general rule, use 24px as vertical spacing between each form element. If you remove the help area (helper text and counter), decrease this space accordingly.
Interaction
Text areas are available in nine different states — inactive, hover, focused, active, error inactive, error active, disabled, filled and read-only.
Read-only and disabled states
Note that the read-only state it to be used in scenarios where data that the user previously introduced needs to be presented but can not be modified, for example:
- In a Summary step of a multipage form, where users can review the dat introduced in previous steps.
- In a Profile page where there's some data the user can modify after registration (for instance address or phone number) and some data the user can't modify ever, or only with a request to the administrators (for instance, user name or registration email).
- In a Client Database entry, the user can read but modify data on fields depending on their access level.
Not to be confused with the disabled state, that is to be used when an input can't be interacted with until the user interacts with the form in some way, for example:
- In a Payment Method selection step, the credit card details fields are disabled until the card option is selected.
Accessibility guidelines
Design considerations
- Don't write important information as placeholder text as it will disappear when users are inputting information.
- Make sure there is enough contrast between the input field and the background.
- Make sure error messages are helpful and provide users with a way to solve the issue.
Accessibility of background colors in combination with an error message
In order to provide guidance on accessibility, we have checked the contrast ratios of our primary colors in combination with the light and the dark mode of the Input fields.
Please only use color combinations that match the WCAG requirements.
