# SearchField

> A search box that can be cleared in one press.

- **Level**: molecule · **Status**: stable · **Role**: input
- **Import**: `import { SearchField } from "@rrios-forge/ui/molecules/search-field";`
- **Source**: `packages/ui/src/molecules/search-field`

Search input pattern composed from InputGroup. Pre-wired with a search icon, optional spinner (loading=true) and optional clear button. role=search on the wrapper, type=search on the input. Placeholder never replaces a label — pass aria-label or wrap in Field. Patterns consulted: Patterns/Forms · SearchAndSelect, Patterns/Feedback · LoadingFeedback.

## Use it for

- Tabs / select / autocomplete → `Tabs` / `Select` / `Combobox` or `SearchField`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `size` | — | `sm` `md` `lg` | `md` | Ergonomic scale, in three families (control, text, container). |

## Stories

- [Playground](/?path=/story/components-molecules-searchfield--playground) · frame: `/iframe.html?id=components-molecules-searchfield--playground&viewMode=story`
- [Loading](/?path=/story/components-molecules-searchfield--loading) · frame: `/iframe.html?id=components-molecules-searchfield--loading&viewMode=story`
- [Clearable](/?path=/story/components-molecules-searchfield--clearable) · frame: `/iframe.html?id=components-molecules-searchfield--clearable&viewMode=story`
- [Disabled](/?path=/story/components-molecules-searchfield--disabled) · frame: `/iframe.html?id=components-molecules-searchfield--disabled&viewMode=story`
- [In toolbar](/?path=/story/components-molecules-searchfield--in-toolbar) · frame: `/iframe.html?id=components-molecules-searchfield--in-toolbar&viewMode=story`
- [With results hint](/?path=/story/components-molecules-searchfield--with-results-hint) · frame: `/iframe.html?id=components-molecules-searchfield--with-results-hint&viewMode=story`

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).