Gooey Input

黏液搜索框

搜索胶囊展开时，图标像液滴一样分离的输入框。

交互方式

点击 Search 展开并自动聚焦。输入后按 Enter 或点击分离的搜索图标提交；失焦或 Escape 收起，保留输入值。支持深浅主题。

使用示例

"use client"
import { useState } from "react"
import { GooeyInput } from "@/components/ui/gooey-input"

export function Demo() {
  const [query, setQuery] = useState("")
  return <GooeyInput value={query} onValueChange={setQuery} onSearch={(value) => console.log(value)} />
}

参数

参数	类型 / 默认值	说明
`value`	`string`	受控输入值。
`defaultValue`	`string`""	非受控初始值。
`onValueChange`	`(value: string) => void`	输入变化回调。
`open`	`boolean`	受控展开状态。
`defaultOpen`	`boolean`false	非受控初始展开状态。
`onOpenChange`	`(open: boolean) => void`	请求展开或收起时调用。
`onSearch`	`(value: string) => void`	点击图标或按 Enter 时提交非空、去除首尾空格的值。
`label`	`string`"Search"	收起时的文字及输入框默认无障碍名称。
`searchLabel`	`string`"Submit search"	分离的搜索按钮无障碍名称。
`placeholder`	`string`"Type to search..."	展开输入框占位符。
`theme`	`"light" \| "dark"`"light"	配色，不依赖站点环境。
`collapsedWidth`	`number`115	收起胶囊宽度（px），限制在 60 至完整宽度之间。
`expandedWidth`	`number`200	展开输入框宽度（px），至少 80。
`expandedOffset`	`number`50	输入框展开后的左偏移（px），至少 44。
`gooeyBlur`	`number`5	SVG 黏液滤镜模糊量，至少 0。
`...inputProps`	`ComponentProps<"input">`	支持 disabled、readOnly、name、aria 属性和输入事件。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

安装内容

Install 会将下面的源码文件写入你的项目。需要的 npm 依赖会一起安装，代码可以直接修改。

clsxlucide-reactmotiontailwind-merge

components/ui/gooey-input.css
components/ui/gooey-input.tsx
lib/utils.ts

来源

https://ui.aceternity.com/components/gooey-input

https://github.com/oguzhantufenk/gooey-search

https://css-tricks.com/gooey-effect/