SearchBox

Open a search popup from a fully clickable search entry, optionally with a shortcut hint.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use SearchBox as a clickable entry that opens global search. It is not an editable query input; use SearchInput for direct entry in a toolbar or list.

This is a clickable search entry. bind:open synchronizes the popup state; value displays the current query.
Use children for a popup or keyboard-shortcut hint. Use SearchInput when the user must edit a query directly.
The default placeholder and clear action follow LocaleProvider. Explicit placeholder values, including an empty string, and aria-label take priority; the query remains unchanged.

Import

import { SearchBox } from '@snowui-design-system/components';

Usage

Outline

Clear

Disabled

Collapse

API Reference

Property	Type	Default	Example	Description
`parts`	`ComponentPartsOf<{ Button: typeof Button }>`	`—`	`parts={{ Button: { size: "md" } }}`	Configure the internally generated Clear button. Explicit child content does not consume this default configuration.
`variant`	`"gray" \| "outline"`	`"gray"`	`variant="gray"`	Search box appearance variant.
`gap`	`number`	`—`	`gap={42}`	Inherited Frame gap token index. Omit it to retain the preferred component gap; explicit values override that preference. Effective graphics/text spacing remains at least 4 CSS px, including zero, root-font scaling and gap scaling.
`value`	`string \| number`	`—`	`bind:value={query}`	Current search text or display value.
`placeholder`	`string`	`—`	`placeholder="Search…"`	Placeholder text. When omitted, searchBox.placeholder provides the localized placeholder (“Search” in en-US). An explicit empty string is preserved.
`open`	`boolean`	`false`	`bind:open={open}`	Whether the popup is open; supports bind:open.
`disabled`	`boolean`	`false`	`disabled`	Disable the trigger.
`readonly`	`boolean`	`false`	`readonly`	Make the trigger read-only so it does not open the popup.
`showSearchIcon`	`boolean`	`true`	`showSearchIcon`	Whether to render the default search icon.
`collapseBelow`	`number`	`—`	`collapseBelow={42}`	At or below this component-width threshold in pixels, retain only the leading search icon. Omit to disable collapsing.
`clearable`	`boolean`	`true`	`clearable`	Whether to show a Clear button when value is present.
`children`	`Snippet`	`—`	`<SearchBox><Kbd as="trailing" variant="solid" style="background-color: var(--surface-3);">⌘K</Kbd></SearchBox>`	Additional leading or trailing content, such as Kbd.
`onOpenChange`	`(open: boolean) => void`	`—`	`onOpenChange={(next) => open = next}`	Callback when the open state changes.
`onClear`	`() => void`	`—`	`onClear={() => message = "Search cleared"}`	Callback when the value is cleared.
`onclick`	`(event: MouseEvent) => void`	`—`	`onclick={(event) => console.log(event.type)}`	Called after clicking the entry with the original MouseEvent. When enabled and not readonly, SearchBox opens first; the callback cannot undo that opening.
`onkeydown`	`(event: KeyboardEvent) => void`	`—`	`onkeydown={(event) => console.log(event.key)}`	Called with the original KeyboardEvent after Escape closes or Enter/Space opens the popup. It cannot undo a state change that already occurred.