Component · controls + overlay

Liquid glass select

Choose one value from a list.

Also called combobox, picker, listbox, autocomplete list

A language selector with its capsule trigger and an open grouped list with a checked option, over zoomed desert ridges.
A language selector with its capsule trigger and an open grouped list with a checked option, over zoomed desert ridges. (light)
A language selector with its capsule trigger and an open grouped list with a checked option, over a zoomed night skyline.
A language selector with its capsule trigger and an open grouped list with a checked option, over a zoomed night skyline. (dark)

Spec

Material
trigger: regular capsule · listbox: frost
Profile
squircle
Geometry
trigger 32–36 tall with chevron; listbox radius 14–16, rows 30–32, group labels caps 11 px
Bezel (px)
16–18
Displacement (px)
30–40
Blur (px)
8–14 (listbox)

Anatomy

  • glass trigger
  • separate glass listbox 6 px below
  • checked row: lighter inner lens pill + ✓
  • group labels
  • unavailable rows 40 %

States

  • closed
  • open
  • focus (accent ring on trigger)

Rules

  • Listbox and trigger are separate bodies; never attach the listbox flush to the trigger.