When I work on interfaces, I love digging into the details. In utility products, microinteractions and the logic behind them largely decide how convenient the product is to use.
It’s great that AI now helps me quickly build a component and check its logic, while I fine-tune the interactions live, right in the code.
For example, I recently needed a combobox for choosing languages. The task was twofold: a) quickly choose several popular languages without making the field taller; b) if the language you need isn’t among the popular ones, show the full list, where you can search and choose several at once.
Tags right in the field solved the first task. When they don’t fit and the field would have to grow taller, the extra ones hide in a tag with a counter, like “+3”, and on hover you can see exactly which languages are hidden inside it.
For the second task, I first decided to take the classic route: the list opens below the field and is attached to its bottom edge. As long as the field doesn’t change height, this works. But as soon as you choose a few languages, the field grows downward, shifting the list right while you’re choosing, which makes it hard to aim at the rows you need.
So here’s what I came up with: when the list opens, the field immediately expands to a second row and doesn’t grow any further. In most situations, two rows are enough, and the list stays in place and doesn’t jump up and down.
I’m already using the component in my project and will keep refining it.
Here’s how it works in the video below.