Text input
Text input is a form element that allows users to input data entries with any combination of letters, numbers or symbols. It is used for short entries that span across a single line, such as names, addresses, emails or passwords.
Usage guidelines
When to use
- To allow users to input short, unique entries that cannot be predicted with options from a predefined list.
When not to use
- If users are required to enter more than one line of information, use Text Area instead.
Writing guidelines
Labels
Text inputs should always have a short, clear label. Additional information is 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.
Specifications
Anatomy
- Input Field - Text input
- Label: Suggest which information needs to be input. When a text field is active, it appears above the placeholder text.
- Placeholder text: (optional) Provides hints or examples on what to enter. It disappears when users start inputting their text.
- Icon (left or right): Describes valid input action and provides access to additional functionality
- Helper text: (optional) Provides additional assistance to users, 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. You can horizontally resize the component to match the length of a data type (e.g. a shorter field for postal code).
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 | Light (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 inputs 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 inputs 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.
