What's the name of the UI component that's like a search box with autocomplete where completed terms turn into little boxes? Like the email address field when you're composing a message in Gmail? It's like a multi-select you can type into.

NSTokenField ?

Yeah, that looks like it. Is "token field" the most common name for this?

Apparently they are called "Chips" on Android https://material.io/components/chips#usage

Other names for this (or similar) UI elements that I'm seeing: • Multi-select • Frother control (JIRA, ugh) • Combo box • Tag select

facebook calls this “tokenizer” (at least when I was there)

https://react-select.com/home does it well

A variation on the theme from some friends: https://nand.io/projects/spotti

The name depends on the OS / Environment🙂 Try looking for “Stepper” in both Apple’s Human Interface Guidelines and Google’s Material Design. You’ll find two very different components ;) As already mentioned, here are two common names for what you’re looking for: Apple: Token Fields https://developer.apple.com/design/human-interface-guidelines/macos/fields-and-labels/token-fields/ Google: Chips https://material.io/components/chips Web: Well … if there only was such thing! Autocomplete, multiple, tags, scoped, … something!

Very fast version in Rust -https://github.com/jameslittle230/stork

I'm partial to "tags" since to me they literally look like "label tags", and always referred to them as such (search tags, hashtags etc). I myself have never heard them referred to as "tokens" in layman conversation, and don't like the term since its overused in many other contexts.

@ZD I find “token” a spot-on term for it (https://en.m.wikipedia.org/wiki/Lexical_analysis#Token) and would say that “tag” is overused. But… well… as far as I can tell, I’m probably double your age and therefore “old school”. ;-)

(Thanks everyone! Found what I needed — motivation to just implement this myself rather than trying to find a library that does just what I want. Yay, the curse.)

When the library doesn't do exactly what you want, it's usually easier to do it yourself. Why is that? Could make a good #C5T9GPWFL topic.

I find that often the component / libraries lack quality in either design, accessibility, functionality, performance… for a library author it is understandably difficult to consider the broad range of use case and needs. And if there’s only one detail that isn’t right then I’d rather not use it / mess with it. Often I would prefer example code (think: D3 examples) that I can copy and modify rather than concrete libraries that are locked down, encapsulated and have a weak API.

Leads me to think of Timothy Gowers' "The Two Cultures of Mathematics" http://www.dpmms.cam.ac.uk/~wtg10/2cultures.pdf, how in combinatorics strategies are often reusable but theorems are not.

@Florian Schulz yeah, that's my feeling too. I have a DOM library that's not published to npm specifically because you're supposed to copy the code into your project and modify it, rather than just consume it as-is. Works well at this scale, at least. Fun design constraint, too. Keeps you from including the kitchen sink.

In the GMail source code, they're called Chips, like @Nick Main says above.