Text fields make it possible to add customer data to Teamleader. We have two versions depending on the background: Light & Dark.
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.
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.
Inline helptext is only used to indicate that the field is optional. Use the block style to give extra guidelines for a particular field.
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.
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.
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
Connected right Button
Nested form elements
Helptext or error/successmessage