Search
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.
Empty is State Default, anything typed is State Searched. CSS reads the field's content; no script decides. Three things move at once: the fill, the 1px edge, and soft token to strong. The trailing icon goes mic to x, and the x clears the field. The component fills its parent, so the 332 here comes from the variant frame. The bar stays on the two content states: Active is a caret state and a real input already draws its own caret.
States
Three variants. Empty is a filled pill with no edge, filled in is a white bar with one, and the third is the bar while a finger is in it.
Default to Searched: the fill goes weak grey to white, a 1px border appears, and the icon and 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 third: the same white bar, but the edge is 1.5 and brand blue, and the text node is replaced by a Typed frame holding the query and a 2 by 22 caret two apart from it.
Style
The second axis. Field sits inline in a form or a header. Hero floats over a photographic header on a home screen, and ends in a real button rather than an icon.
Hero is 12 taller, 13 wider and carries a shadow, so it reads as an object sitting on the page rather than a row cut into it. The leading search icon drops 24 to 20, and the trailing 24 icon becomes a 44 icon-only Button on bg/strong-950 holding a 22 sliders-horizontal. Two things to know. Hero has no Show Mic, because it has no mic. And Hero's Searched changes only the text colour, where Field's Searched also changes the fill, the edge and the trailing icon, so the same state name means different things on the two styles.
Trailing icon
One boolean, wired to one variant. The 20 before it is a node in the file, not a gap.
Show Mic hides the microphone in the default state and nothing else. The searched variant carries no property reference, so the boolean does nothing there, and Hero has no mic at all. When the mic goes the query row takes the 24 back, but the empty 20 slot stays, so the text ends 20 short of the padding. That slot is an unfilled rectangle in the file. Hero solves the same problem a different way, with a flexible Spacer that exists only in its Active variant.
Properties
Two axes, one boolean and one text property. Six variants, and the boolean reaches exactly one of them.
Placeholder is a real text property, so the word in the bar is set on the instance rather than overridden on the layer. The entered value is not: the same text node carries both, at one style, 18/28 Semi Bold, heavier than most placeholders. There is still no loading or disabled state; add those yourself.
Tokens
Eight colours and one effect style, and several of the pairs are the same value under two names.
The icons read fg/soft-500 and fg/strong-950; the text beside them reads text/soft-500 and text/strong-950. Each pair resolves to the same primitive in both modes, so the distinction is naming, not colour, and one CSS property covers both. bg/strong-950 and fg/white-0 are an inverting pair, which is why 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 dropShadow/lg effect style, two drop shadows: 0 12 18 at spread -3 on black 8 percent, and 0 5 6 at spread -5 on black 5 percent.
Guidelines
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.
Do not write a sentence in the field. At 18/28 Semi Bold it truncates in the middle of the promise and the half that survives is the half nobody needed.
Field goes in the Top Bar or at the head of a list, never floating in the middle of content. Hero is the one exception the file draws, and it is a narrow one: a home screen header, over an image, with the action button doing something real. Turn Show Mic off unless voice input actually works; an icon that opens nothing costs a target. Neither the x nor the action button is wired to anything, so clearing the field and handling the action are code you write.