SearchInput

提供带搜索图标的单行输入框，适合列表过滤、页面搜索和工具栏中的查询输入。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于直接输入查询文本，例如列表搜索。全局搜索浮层的入口用 SearchBox；查询如何筛选数据由宿主处理，DataTable 工具栏优先 TableToolbar。

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

属性	类型	默认值	示例	描述
`type`	`InputProps["type"]`	`"search"`	`type={value}`	原生输入类型；默认使用搜索输入
`value`	`string \| number`	`—`	`value="Example"`	当前值，支持 `bind:value`
`element`	`HTMLElement`	`—`	`bind:element={element}`	绑定根元素引用，用于读取实例或聚焦相关内容；不是输入值。
`defaultValue`	`string \| number`	`—`	`defaultValue="Example"`	初始值
`showSearchIcon`	`boolean`	`true`	`showSearchIcon`	是否渲染默认搜索图标
`collapseBelow`	`number`	`—`	`collapseBelow={42}`	当组件自身宽度小于或等于该 px 阈值时，在空值且未聚焦状态退化为仅搜索图标；未传时不启用
`variant`	`"default" \| "borderless"`	`"default"`	`variant="default"`	外观变体；`borderless` 移除自身边框、背景、圆角、padding 和 focus ring，在 Flex / Block 宿主中填满可用空间，并在 shrink-to-fit 宿主中保持稳定固有宽度，适合嵌入已有表面的工具栏或面板
`as`	`InputProps["as"]`	`"search"`	`as={value}`	角色关键字;默认透传给内部 `Input`,使 SearchInput 放入 `<Popover>` / `<Listbox>` 时自动移入固定 header,行为与 `<Input as="search">` 一致。可显式覆盖。
`class`	`string`	`""`	`class="my-component"`	追加到 SearchInput 根宿主的 class，保留组件自身样式类。
`children`	`Snippet`	`—`	`<SearchInput>Content</SearchInput>`	外置 leading / trailing / 其他 Input 子内容