SearchInput

Provide a single-line search field with an icon for filtering lists, pages, and toolbar content.

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 SearchInput for direct query entry, such as searching a list. Use SearchBox to open a global search popup. The host filters the data. For DataTable, prefer the TableToolbar search control.

bind:value keeps the input text in sync; the page decides how that query filters application data.
The default as="search" role can place it in the search region of Listbox or Popover. Inside an existing surface, borderless avoids a second border and background.

Import

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

Usage

Clear

Leading

State

Borderless

Input props

API Reference

Property	Type	Default	Example	Description
`type`	`InputProps["type"]`	`"search"`	`type={value}`	Native input type; defaults to search.
`value`	`string \| number`	`—`	`value="Example"`	Current input value; supports bind:value.
`element`	`HTMLElement`	`—`	`bind:element={element}`	Reference to the root element for instance access or focus. It is not the input value.
`defaultValue`	`string \| number`	`—`	`defaultValue="Example"`	Initial input value.
`showSearchIcon`	`boolean`	`true`	`showSearchIcon`	Whether to render the built-in search icon.
`collapseBelow`	`number`	`—`	`collapseBelow={42}`	Width threshold in pixels. At or below it, an empty unfocused input collapses to only the search icon. Omit to disable collapsing.
`variant`	`"default" \| "borderless"`	`"default"`	`variant="default"`	Appearance variant. borderless removes its own border, background, radius, padding, and focus ring. It fills available room in Flex or Block hosts while preserving intrinsic width in shrink-to-fit hosts.
`as`	`InputProps["as"]`	`"search"`	`as={value}`	Role passed to the inner Input. search places SearchInput in the fixed header when used inside Popover or Listbox. Can be overridden explicitly.
`class`	`string`	`""`	`class="my-component"`	Additional class on the SearchInput root while retaining its component class.
`children`	`Snippet`	`—`	`<SearchInput>Content</SearchInput>`	Additional Input content before or after the input.