---
title: Search
description: Search finds content as you type. The Figma component has a 44 tall Field, a 60 tall Hero, three states, optional voice input and light and dark tokens.
group: Components
source: https://www.appetiteui.com/docs/search-field
dateModified: 2026-10-03
---

# Search

Updated: October 3, 2026.

Search lets people find content by typing a query, with voice input when the keyboard is in the way.

## 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.

Specimen: State follows what you type. 44 tall, full radius, padding 8 and 16, width fills the parent.

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.

Specimen: State Default, Searched, Active, all at Style Field. bg/weak-50 no border, bg/white-0 with 1px, bg/white-0 with 1.5px brand.

Field is 44 tall at full radius. Active is a 1.5 pt brand edge on a white bar with a 2 by 22 caret.

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.

Specimen: Style Hero, all three states. 345 x 60, full radius, padding 18 and 8, gap 10, dropShadow/lg.

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.

Specimen: Show Mic true and false, both at State Default, Style Field. the query row is the only thing that stretches.

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.

| Appetite UI component | iOS counterpart | Material 3 counterpart | What differs |
| --- | --- | --- | --- |
| `Search`, Field | None in the file beyond the Search Role tab of iOS / Tab Bar. SwiftUI offers the searchable modifier. | None in the file. Compose offers SearchBar. | Field is 332 x 44 at full radius with a mic and a clear button. |
| `Search`, Hero | None in the file | None in the file | Hero is 345 x 60 with a shadow and a 44 pt action button. |

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](https://www.appetiteui.com/docs/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.

| Property | Type | Options | Default |
| --- | --- | --- | --- |
| `State` | Variant | Default, Searched, Active | Default |
| `Style` | Variant | Field, Hero | Field |
| `Placeholder` | Text | any string | Search |
| `Show Mic` | Boolean, Field only | on, off | on |

| Part | What it is | Size |
| --- | --- | --- |
| `Query row` | Field only. Icon and text, the only child that stretches | fills, 28 tall |
| `Icon slot` | Field only. An empty rectangle with no fill and no stroke | 20 x 20 |
| `Typed` | Active only. The query and a caret, 2 apart | hugs, caret 2 x 22 |
| `Spacer` | Hero at State Active only. An empty flexible frame | fills, 1 tall |
| `Action` | Hero only. An icon-only Button on bg/strong-950 | 44 x 44, icon 22 |
| `mic` or `x` | Field only. Swapped by variant | 24 x 24 |

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.

| Token | Light | Dark | Applied to |
| --- | --- | --- | --- |
| `bg/weak-50` | #F4F5F5 | #242427 | The Field bar in Default |
| `bg/white-0` | #FFFFFF | #0E0E0F | Field in Searched and Active, and every Hero |
| `border/soft-100` | #E9E9EA | #2F2F31 | The 1 pt inside edge, Field Searched and Hero |
| `brand/base` | #155DFC | #2B7FFF | The 1.5 pt Active edge and the caret |
| `bg/strong-950` | #0E0E0F | #FFFFFF | The Hero action button |
| `fg/white-0` | #FFFFFF | #0E0E0F | The sliders icon on that button |
| `text/soft-500` | #8E8E93 | #AEAEB2 | Placeholder and search icon, with fg/soft-500 on the mic |
| `text/strong-950` | #0E0E0F | #FFFFFF | Query text and icons once there is a query |

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.

- Do: Keep the placeholder to a word or two. The search icon and its gap take 32 before the text starts, and the slot and mic take another 44 after it.

- Avoid: Do not write a sentence in the field. At 18/28 Semi Bold it truncates in the middle of the promise.

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.

## In the screens and the glossary

- Screens: [Search and filter screens](https://www.appetiteui.com/screens/patterns/search-and-filters)