Combobox
Seven components and thirty-three variants. Not one component you drop in, but a trigger, a panel, and the rows and parts you build the panel out of.
Eight lists from three switches
Colour flips the surface between white and #262626, Appearance drops it to 70% so whatever is behind shows through, and Show Search takes the 36px filter row off the top. The list is 250 wide and either 184 or 148 tall. Search and pick below: both work.
Menu Item carries the tick, not the list
Two by three by two. Simple is a single line at 28 tall; Custom adds a description and grows to 44. Selected shows or hides a 16px check on the right, and the hover fill is the only thing State changes. The row is 245 wide with 6px of side padding at radius 8.
| Type · Selected | Default | Hover | Hover (Translucent) |
|---|---|---|---|
| Simple · Yes | Select Item | Select Item | Select Item |
| Simple · No | Select Item | Select Item | Select Item |
| Custom · Yes | Select Item Select Description | Select Item Select Description | Select Item Select Description |
| Custom · No | Select Item Select Description | Select Item Select Description | Select Item Select Description |
Hover is a solid base.muted; Hover (Translucent) is the same fill at 70%. A solid row on a frosted panel reads as a patch of paint stuck to the glass, so the translucent one lets the surface behind it through. Match the row to the panel it lives in: Solid takes the solid hover, Translucent takes the faded one, and swapping them is visible immediately.
Four containers and three loose parts
Combobox is assembled rather than dropped in. The trigger and the list are separate components, the rows that fill the list are a third, and the group label, the separator and the selection chip are published on their own so a list can be built out of them.
the trigger, 228 × 32
the panel, 250 wide
a row, 245 × 28 or 44
a chip in the trigger, 21 tall
a group heading, 245 × 28
a 1px rule with 8px of room
trigger and list already stacked
Six lists doing six different jobs
The second frame is 1120 by 2040 and builds the cases the parts were drawn for. The copy is the file's, and the lists below are live. The first of the six is the country field already shown above, so the other five follow here.
Seven components, thirty-three variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Combobox
Because a combobox is a trigger and a panel that appear in different places and at different times, and the panel's contents change per use. Menu Item, Label and Separator are published on their own so you can build the list you actually need rather than override a fixed one. The plain Combobox component is the trigger and list already stacked, for when the default is what you want.
Drops the panel surface to 70% so whatever sits behind it shows through, for a list floating over content rather than over a plain page. Solid is the one to place over a plain background; Translucent only earns its keep when there is something underneath worth seeing.
The trigger fills with chips instead of a placeholder, and the file draws it at rest and focused. Disabled and Active have no separate meaning once the field is full of selections: Active is what a filled Multiple already is, and a disabled one is the Default trigger at half opacity.
The hover fill on a row that sits inside a translucent panel. A solid base.muted row on frosted glass reads as opaque paint stuck to the surface, so it drops to 70% and lets the panel through. Pair it with the Translucent panel and nothing else - on a solid surface it is just a paler highlight.
Yes. Selected is an axis on Menu Item, not something the list manages, so a row knows whether it is chosen. That keeps a multi-select list working without a wrapper: every chosen row shows its own 16px check.