Menu

Component · controls + overlay

Liquid glass select

Choose one value from a list.

A language selector with its capsule trigger and an open grouped list with a checked option, over zoomed desert ridges.

Copy the prompt

Free

The rules, the spec, the glass code for Web and the checks, in one text.

Works in any AI that can write code.

Or connect your AI once
Material
trigger: regular capsule · listbox: frost
Profile
bevel
Bezel (px)
16–18
Displacement (px)
0.4 × bezel (6.5–7)
Blur (px)
8–14 (listbox)

Geometry. trigger 32–36 tall with chevron; listbox radius 14–16, rows 30–32, group labels caps 11 px

Rules1
  • Listbox and trigger are separate bodies; never attach the listbox flush to the trigger.
Anatomy5
  • glass trigger
  • separate glass listbox 6 px below
  • checked row: lighter inner lens pill + ✓
  • group labels
  • unavailable rows 40 %
States3
  • closed
  • open
  • focus (accent ring on trigger)

Questions

What material is a liquid glass select?

Trigger: regular capsule · listbox: frost material with a bevel edge profile, in the controls + overlay layer. Choose one value from a list.

How big is a liquid glass select?

Trigger 32–36 tall with chevron; listbox radius 14–16, rows 30–32, group labels caps 11 px.

What bezel, displacement and blur does it use?

Bezel 16–18; displacement 0.4 × bezel (6.5–7); blur 8–14 (listbox) (px).

Which states does a liquid glass select need?

Closed; open; focus (accent ring on trigger).