Text fields

Types

Text fields make it possible to add customer data to Teamleader. We have two versions depending on the background: Light & Dark.

Content

A text field can have placeholder text. An icon to the left or right can be added to put emphasize on the kind of required input data.

Labels

If there is room to show labels, do so. This empowers the user to double-check the provided input with the label. With only placeholders, that info disappears once the user starts typing.

Help Text

Inline helptext is only used to indicate that the field is optional. Use the block style to give extra guidelines for a particular field.

Validation

It is a good idea to provide both a general error message, and a field specific one. When a form gets submitted, the user will end up on the same page, but you don’t know if the error is in the viewport.

Put both an error on top of the form (and make sure it is in the viewport on both desktop and mobile) as well as field specific explanations about what is wrong with the inputted data.

Sizes

Text fields have three key sizes: small, medium and large.

Prefixes and suffixes

Text fields can be prefixed and/or suffixed with a button element to enhance the functionalitty of the textfield.

Cccccccombo’s

Input fields are built in a way they can be combined with other elements other to make more complex interactions possible. Use this only in cases where there is no basic alternative and there is a limit complexity as much as possible.

It is pretty obvious that this is a terrible form element. However, it helps us to see how the indivual elements hold up when they are combined.

Label + optional


Connected left Button

Prefixed text

Prefixed icon


Input value


Suffixed Text

Suffixed Icon

Counter

Spinner buttons

Connected right Button


Nested form elements

Status backgrounds


Helptext or error/successmessage