# Liquid glass search field: spec and references

Source: https://meniscus.site/components/search-field · Updated 2026-09-27

Search entry. Layer: controls.

Also called: search, autocomplete, search bar.

| Property | Value |
|---|---|
| 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.

## References

![A capsule search field with a separate suggestion list below it, over zoomed desert ridges.](https://meniscus.site/gallery/search-field-light-studio.webp)

![A capsule search field with a separate suggestion list below it, over a zoomed night skyline and its waterline.](https://meniscus.site/gallery/search-field-dark-studio.webp)

## Use it with your assistant

This spec is what the Meniscus MCP server's `get_component_spec` tool returns for `search-field`. Materials, colours, light and composition rules that apply to every component are in the [liquid glass guide](https://meniscus.site/liquid-glass). Connect: `claude mcp add --transport http meniscus https://meniscus.site/mcp` — setup for every client: https://meniscus.site/docs