Find out about best practices when capturing user text input or forms, and providing the right visual indicators when an error occurs.

General rules:

Always show a label and placeholder text. An effective way to combine the two is to animate the placeholder text when the user starts typing. Provide visual feedback when focus changes, for example using a simple border.

Error handling

Use colour and icons to signal errors, display messaging underneath and keep error messages to one line only.

    Hey, smarty!

    Login or signup to get started

    What's your name?

    What's your password? Lost Password
    We sent a link to reset your password to your email.
    Create a new password
    Upload file