Forms

Text Input

Text Text with Placeholder Email Password URL Telephone Number Search Date Datetime-local Month Time Week Datalist Textarea

Notes:

Add dir="auto" to inputs that accept text.
Avoid nesting input elements inside of label elements for better support for Dragon Speech Recognition.
Add autocomplete="new-password" to <input> elements with a type of password to make supporting browsers suggest secure passwords.
<input type="number"> has numerous issues with Dragon Naturally Speaking and NVDA.
Using <input type="password"> needs to also have spellcheck="false" declared on it to avoid a security risk.
Safari's password AutoFill feature can be configured with custom password criteria.
Popular password managers can be disabled by adding data-1p-ignore data-lpignore="true" data-form-type="other" data-bwignore to <input type="password">. This will affect 1Password, Lastpass, Dashlane, and Bitwarden.
maxlength's presence is not announced by screen readers.
Use handwriting="true" to allow handwriting input, and handwriting="false" to disallow it.
enterKeyHint allows you to customize the Enter key on virtual keyboards.

Non-text Input

Color File Input Range Input

Notes:

Some pointers on styling the range input.

Select

Select Select with Optgroup Multiple Select

Notes:

The optgroup element has mixed support with assistive technology.

Buttons

Text Button

Notes:

Add type="button" to <button> elements placed outside of forms to prevent some browsers from attempting to submit form data.
Add pointer-events: none; to inline SVG icons placed in buttons.
Add focusable="false" to SVG inside of a focusable element (links, buttons, etc.) to prevent a bug with Internet Explorer.
Use tabindex="0" in conjunction with role="button" to ensure that the text button is focusable. Use cursor: pointer; in the CSS to communicate that it is interactable. Learn more about When To Use The Button Element.
Use enterkeyhint to manipulate the enter key on a virtual keyboard.

Output

Output 350 degrees

Lockup

Your Name This is what we'll use to refer to you if we have to contact you Can we send you periodic messages about your account? I agree

Notes:

Place messaging above the input field so as to not be lost when magnification or focus on mobile occurs.

States and Validation

Input

Required Readonly Loading Disabled Valid Invalid Warning Search with Autosave Input with Pattern Validation Minlength Maxlength

Button States

Notes:

Use :hover, :focus, and :active selectors to control the other button states. Learn more about semantically managing state and using Buttons in Design Systems.
Other user-facing states may also apply.

Autocomplete

On (Browser automatically completes) Name (Full name) Honorific Prefix (Mr., Ms., Dr., etc.) Additional Name Family Name Honorific Suffix (Jr., II, etc.) Nickname Autocomplete Email Username New Password Current Password Organization Title Organization Street Address Address Line 1 (Can use address-line1-3) Address Level 4 (Can use address-level4-1) Country Country Name Postal Code CC Name (Full name as given on the payment instrument) CC Given Name CC Additional Name CC Family Name CC Number CC Exp CC Exp Month CC Exp Year CC CSC (Security code) CC Type (Visa, American Express, etc.) Transaction Currency Transaction Amount Language (Valid BCP 47 language tag) Bday Bday-day Bday-month Bday-year Sex (Gender identity; free-form text, no newlines) Autocomplete URL One-time Code Photo

Notes:

Be sure to reference the Falsehoods Programmers Believe collection for creating bulletproof inputs.

Forms

Text Input

Notes:

Non-text Input

Notes:

Select

Notes:

Checkboxes and Radio Buttons

Buttons

Notes:

Output

Lockup

Notes:

States and Validation

Input

Button States

Notes:

Autocomplete

Notes: