Text Inputs
Text
When to use: Names, job titles, short identifiers
What users see: A simple one-line input field
What users see: A simple one-line input field
Text Area
When to use: Comments, explanations, longer responses
What users see: A larger box that grows with text
What users see: A larger box that grows with text
When to use: Collecting valid email addresses
What users see: An input that checks email format automatically
What users see: An input that checks email format automatically
Understanding Browser Autocomplete
Understanding Browser Autocomplete
What is Autocomplete?
Browser autocomplete helps users fill forms faster by suggesting previously saved information like names, addresses, payment details, and more. According to Google, proper autocomplete implementation can reduce bounce rates by up to 70%.When to Use Autocomplete
Enable autocomplete when collecting standard information users likely have saved:- Personal details (name, email, phone)
- Address information
- Payment details
- Login credentials
- Collecting sensitive unique information (reference numbers, case IDs)
- Creating forms where pre-filled data causes confusion
- Browser suggestions interfere with user experience
Browser Autofill Options
Select from these common autofill behaviors. For the complete list of all available values, see the MDN autocomplete reference.| Behavior | What It Does | Example Use Case |
|---|---|---|
on | Default browser autofill | General text inputs |
off | Disables autofill* | Reference numbers, unique IDs |
name | Full name suggestions | ”What is your name?” |
given-name | First name | ”First name” field |
family-name | Last name | ”Last name” field |
email | Email address | Contact information |
tel | Phone number | Phone fields |
street-address | Full address | Delivery/billing address |
postal-code | ZIP/postal code | Address forms |
country | Country name | Location selection |
organisation | Company name | Business details |
cc-number | Credit card number | Payment forms |
cc-exp | Card expiration | Payment forms |
username | Username | Login forms |
off is selected, the system automatically rotates the autocomplete value to prevent browsers from overriding your choice.Quick Start Guide
For most use cases: Select a standard behavior from the Browser Autofill dropdownTo enable helpful autofill: Usename, email, cc-number, etc. to reduce bounce ratesTo disable autofill (simple): Select off - the system handles rotation automaticallyTo disable autofill (advanced): Use the Advanced Autofill field with a variable that rotates values weekly/bi-weekly to outsmart Chrome’s MLFor specific autocomplete values: Use the Advanced Autofill field with a raw string. Refer to the complete MDN autocomplete specification for all available values.Contact [email protected] if you want to include a new autocomplete property.
Numbers and Money
Number
When to use: Counts, IDs, reference numbers
What users see: A numeric field with simple validation
What users see: A numeric field with simple validation
Amount
When to use: Loan amounts, income, premiums
What users see: A money field with proper formatting
What users see: A money field with proper formatting
Percentage
When to use: Interest rates, completion %
What users see: Input with automatic % handling
What users see: Input with automatic % handling
Age
When to use: Insurance or eligibility flows
What users see: Age field with realistic ranges
What users see: Age field with realistic ranges
Year
When to use: Tax year, graduation year, policy start year
What users see: Input restricted to year values
What users see: Input restricted to year values
Formatted Number
When to use: Phone numbers, IDs, custom formats
What users see: Input that applies formatting as you type
What users see: Input that applies formatting as you type
Files, Dates & Locations
Date Picker
When to use: Birth dates, appointments, policy start dates
What users see: A simple calendar interface
What users see: A simple calendar interface
File Upload
When to use: Document submission, ID photos, attachments
What users see: Upload button with file size/type checks
What users see: Upload button with file size/type checks
DAWA Address
When to use: Any address collection in Denmark
What users see: Validated addresses from the official DAWA service
What users see: Validated addresses from the official DAWA service
CPR/CVR Lookup
When to use: Danish customer or company verification
What users see: Input that validates CPR or CVR numbers
What users see: Input that validates CPR or CVR numbers
Best Practices
- Keep it short: Ask one thing at a time
- Guide users: Use placeholders and helper text
- Validate gently: Show clear messages only when needed
- Think mobile: Make sure inputs are easy to tap and type on small screens
Example Recipe
Basic Contact Form:Message → Text (Name) → Email → Date Picker (Preferred time) → File Upload (Optional document)