Autocomplete

Autocomplete is a search field that proposes matches while you type, from a set the reader does not have to know in advance.

Get Pro to installPro6 blocksReact, Vue and Figma
MCPConnect the MCP server
Accounts4
Northwind Logistics Logistics · 42 contacts · Toronto
Northwind Retail Group Retail · 18 contacts · Chicago Trial
Northgate Partners Consulting · 9 contacts · Boston
Nordic Supply Co. Wholesale · 27 contacts · Minneapolis
People4
Sam Norris Procurement lead · Northgate Partners
Alex Nordin Chief financial officer · Nordic Supply Co.
Ana Ruiz Head of operations · Northwind Logistics
Sarah Nolan Buyer · Northwind Retail Group

Every block in the set#

Account search

Search boxes over accounts and people, where each row should say at a glance who is who

Account search, finishes the name

Search where the best answer is usually the first one: the field finishes the name and the list re-ranks as you type

Account search, explains itself

Search where a row is not enough to choose: the active row shows what is behind it before it is opened

Location picker

A setting shown as a pill that opens into a search: location, timezone, language

Location picker, map

A place choice where seeing where it is helps

Location picker, field

A place setting that edits in place

When to use#

  • A search box where the reader half-knows the thing they are looking for
  • Address or place entry, where the canonical spelling comes from a service
  • A setting whose value is one of thousands: timezone, language, currency
  • An at-mention inside a composer, offered as the name is typed

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.