SearchInput
Labeled search input with a localized clear action.@gemologic/sheen · formsPlayground
<SearchInput label="Search orders" defaultValue="BTC" />Variant matrix
Search orders
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/SearchInput.tsx- Tokens
--sheen-color-bg-inset--sheen-color-border-control--sheen-control-h-md
Accessibility
Role: searchbox plus a native clear buttonKeyboard: Native text editing, Tab to clear action, Enter or Space clears and restores input focusDo
- Own requests, debounce, composition-aware search scheduling, and stale-result handling in the app.
- Keep existing results visible during query refresh. Use native onInput for detailed input/composition events.
Do not
- Do not treat this as an autocomplete or results popup.
- Do not switch between controlled and uncontrolled ownership during the control's lifetime.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
value | string | — | Controlled query. When supplied, the parent must accept changes through onValueChange. An active IME draft remains locally visible until composition ends. |
defaultValue | string | — | Initial uncontrolled query and native form-reset target, ignored when value is supplied. |
onValueChange | (value: string) => void | — | Receives input and clear edits synchronously, including composition input, and changed uncontrolled values after an uncanceled form reset. No fetching or debounce is performed. |
clearLabel | string | — | Override the localized clear-search action label. |
shortcut | ShortcutAction | undefined | — | Optional typed shortcut registration that focuses the input when a ShortcutProvider is present. |
description | string | — | Associated search instructions. |
label * | string | — | Required visible label. |
error | string | — | App-owned validation message. |