Component · controls

Liquid glass search field

Search entry.

Also called search, autocomplete, search bar

A capsule search field with a separate suggestion list below it, over zoomed desert ridges.
A capsule search field with a separate suggestion list below it, over zoomed desert ridges. (light)
A capsule search field with a separate suggestion list below it, over a zoomed night skyline and its waterline.
A capsule search field with a separate suggestion list below it, over a zoomed night skyline and its waterline. (dark)

Spec

Material
regular
Profile
squircle
Geometry
capsule 36–44 tall with leading magnifier; to filter a list, inline above the rows it filters (below the title, scrolling with them or pinned under the bar); as app-wide search on iOS 26, at the bottom next to the tab bar or in a toolbar
Bezel (px)
18–20
Displacement (px)
25–30
Blur (px)
1–2

Anatomy

  • glass capsule
  • leading icon
  • placeholder
  • optional trailing mic/clear

States

  • rest
  • typing: trailing clear button
  • focus (app-wide search): expands (morph) and shows suggestions in a separate glass listbox; without morph it simply widens

Rules

  • Filtering a list needs no suggestion listbox: the rows below it are the results.