Whether you're browsing different sites or buying something online, you likely rely on an autofill system to enter your usernames, passwords, addresses, and payment details so you don't have to manually type that data every time. Google already offers this in Chrome, but the interface is changing and adopting a more modern look that's anchored to your keyboard.

New interface flags

If you try to login or buy something in Chrome now, this is the UI you're likely to get when you tap in the text field. A pop-up appears right on top of or below the box and offers the different login, payment, or shipping address options you've saved with Chrome.

Current autofill interface is a pop-up near the text field.

On both Chrome Dev and Canary, a new UI has appeared for some users by default, but it's also available on Stable and Beta if you enable these two flags in chrome://flags

  • #autofill-keyboard-accessory-view (for passwords)
  • #enable-autofill-manual-fallback (for addresses and payment methods)

When turned on, these flags trigger a row on top of the keyboard for autofill, instead of the pop-up. The different options show up as scrolling bubbles in the row, with three icons at the end: a key for logins, a card for payment methods, and a pin drop for addresses.

Left: Flags to enable this new UI. Right: Look at the row on top of the keyboard.

Passwords

For login details, you can scroll through the different saved accounts in the row or tap on the key icon to expand and view all saved usernames and passwords corresponding to the site you're visiting. You'll also find a "Manage passwords" option that takes you to Chrome's password manager.

If you type a new username that's not associated with any saved login, moving to the password field will let Chrome ask if you want it to suggest a strong password. That way you don't have to come up with a safe login detail on your own.

Left: Expanded login details for the current site. Right: "Suggest strong password" when using a new login.

Addresses

Addresses follow the same pattern: scrolling bubbles of different addresses (if applicable) which get auto-filled by simply selecting one. Tapping on the pin drop expands to show each line separately, so you can quickly paste each element, like city or zip code, on its own.

Left: Autofill bar with the address on top of the keyboard. Right: Expanded view.

Credit cards

The same is true for payment methods. You'll see your saved cards in the row on top of the keyboard and can tap on the icon to expand it and see each detail separately if you need.

Left: Autofill bar with the credit card on top of the keyboard. Right: Expanded view.

Touch to fill UI

In addition to this new keyboard-stacked autofill bar, Chrome is testing a touch-friendly option which is enabled by the flag #touch-to-fill in chrome://flags. When you tap the username entry field of any website, you will get an overlay from the bottom of the screen with your account details. Choose the correct option and it will be filled in automatically. You can also swipe up to reveal the full pop-up with the "Manage passwords" option at the bottom.

This flag hasn't made its way to Chrome Stable yet, but it's available on Beta, Dev, and Canary. It'll likely show up in an upcoming version of Chrome.

Left: Touch to fill interface. Right: Expanded view.

Currently, there's no real benefit to this new autofill interface over the existing pop-up. All options remain the same, and usability-wise, it takes just as many taps to fill up a password, address, or credit card. The location on top of the keyboard does clean up the page a little, but it may require a bit more finger travel to reach as the details aren't anchored to the text box you just selected. It's also neater and tidier, but shows significantly less information at a glance and requires some swiping if you have several cards, addresses, or accounts on a page.

There's no harm in giving it a try and seeing if you prefer it, so grab any version of Chrome from the links below and enable the flags mentioned above if you don't get the new UI by default.

Google Chrome: Fast & Secure
Google Chrome: Fast & Secure
Developer: Google LLC
Price: Free

Chrome Beta
Chrome Beta
Developer: Google LLC
Price: Free

Chrome Dev
Chrome Dev
Developer: Google LLC
Price: Free

Chrome Canary (Unstable)
Chrome Canary (Unstable)
Developer: Google LLC
Price: Free
  • Thanks:
  • Gurkanwal Singh,
  • Tim L