Sign in forms allow users to input authentication details (typically a username or email and password) in order to gain access to password protected content and functionality.
Best practices
Wherever possible, users should be permitted to use an email address or phone number as their username.
Auto focus on the first input field in the form. This saves time and effort and moves the user directly to the first field.
Give users the option to see their password as they enter it. This helps reduce input error and can be enabled by a checkbox, toggle, or icon.
Always include links to recovery options like ‘Forgot password’ and ‘Forgot username’ (where applicable).
Warn users if caps lock is on.
Example
Sign in
Add the following JavaScript for the hide/show password functionality:
To auto focus an input on load use the focusOnLoad class on your input and include the following JavaScript: