Search

Preview

A search bar for the top of a screen or the first row of a list, with the microphone as an optional second way in. Type in it: the bar fills and turns white as soon as there is text.

Empty is State Default and anything typed is State Searched. The fill, the 1 pt edge and the ink change together, the mic gives its place to an x, and the x clears the field.

While the field has the keyboard it takes State Active, a 1.5 pt brand edge. The component fills its parent, so the 332 here comes from the variant frame.

Which states does Search have?

Three states. Empty is a filled capsule with no edge, the typing state has a brand edge and a caret, and a query that has been entered is a white bar with a gray edge.

Default to Searched: the fill goes from weak gray to white, a 1 pt border appears, and the icon and the text step from the soft token to the strong one. The trailing icon changes job too: the microphone offers another way to start and the x clears what is there.

Active is the same white bar with the brand edge and the caret after the query.

When should I use Hero instead of Field?

Use Field inline in a form or a header, and Hero floating over a photographic header on a home screen, where it ends in a real button.

Hero is 16 taller, 13 wider and carries a shadow, so it reads as an object sitting on the page. The leading search icon is 20 instead of 24, and the trailing slot is a 44 pt icon-only Button on bg/strong-950 holding a sliders icon.

Hero has no Show Mic, because it has no mic. Its Searched state changes only the text color, where Field's Searched also changes the fill, the edge and the trailing icon.

How do I hide the microphone?

One boolean, Show Mic, decides whether Field in State Default ends on a microphone.

Show Mic hides the microphone in State Default and nothing else. State Searched always shows the x, and Hero never shows a mic.

A 20 wide empty slot sits before the trailing icon in the file, so with the mic off the text ends 20 short of the padding.

How does Search differ on iOS and Material 3?

The Apple Platform and Material 3 pages of the file have no search field, so there is no mirror to compare. Appetite UI draws a capsule 44 tall, which equals the iOS minimum touch target.

The minimum touch target comes from platform/min-touch-target: 44 pt on iOS and 48 dp on Android. Field is exactly 44 tall, so on Android raise the hit area to 48 in code.

Hero clears both. See Platform Bridge for how one screen switches between the platforms.

Properties

Two variant properties, one boolean and one text, with the six variants they make.

Placeholder is a text property, and the same text node carries the query at one style, 18/28 Semi Bold. There is no loading or disabled state.

Clearing the field and handling the action button are code you write.

Six variants. Source: the Search page of the Appetite UI Figma file, read on October 2, 2026.

Tokens

Every value the component reads, and several pairs that are the same value under two names.

The icons read fg/soft-500 and fg/strong-950, and the text beside them reads text/soft-500 and text/strong-950. Each pair resolves to the same primitive in both modes.

bg/strong-950 and fg/white-0 are an inverting pair, so the Hero button is a black circle with a white icon in Light and a white circle with a black icon in Dark.

The Hero shadow is the effect style dropShadow/lg: 0 12 18 at spread minus 3 on black at 8 percent, and 0 5 6 at spread minus 5 on black at 5 percent.

The product soft text color, #8E8E93, measures 3.26:1 on white, under the 4.5:1 that small text needs. It is a documented product choice for the placeholder and the search icon, so raise it in your own product if the placeholder carries essential information.

In code the field takes focus from a tap or from the keyboard and shows the 1.5 pt brand edge of State Active. Field is 44 pt tall, which meets the iOS target, and on Android it needs a 48 dp hit area.

Where does Search belong on a screen?

Field goes in the Top Bar or at the head of a list, not floating in the middle of content.

Hero is the one exception: a home screen header, over an image, with the action button doing something real. Turn Show Mic off unless voice input works, because an icon that opens nothing costs a touch target.