SearchForm 搜索表单

响应式搜索表单组件，支持容器查询自适应布局、展开/收起功能。

安装

npm

yarn

pnpm

bun

deno

npx shadcn@latest add https://codebase.anyask.dev/r/search-form.json

组件使用 容器查询 实现响应式布局，根据父容器宽度自动调整列数。

父容器需要设置 container-type: inline-size 才能生效容器查询。

通过 maxCols prop 限制最大列数，默认 4 列。

通过 actions 属性自定义操作按钮区域。

当表单项数量较多时，会自动显示展开/收起按钮。

属性	说明	类型	默认值
form	表单实例，如果不传入则内部创建	`FormInstance<unknown>`	`-`
className	表单的 className	`string`	`-`
maxCols	最大列数，默认 4，范围 1-4	`1 \| 2 \| 3 \| 4`	`4`
maxCount	最大显示数量	`number`	`-`
defaultCollapsed	默认是否收起，默认 true	`boolean`	`true`
collapsible	是否显示展开/收起按钮	`boolean`	`true`
resetText	重置按钮文本	`string`	`重置`
searchText	查询按钮文本	`string`	`查询`
onSearch	表单提交回调	`(values: Record<string, any>) => void`	`-`
onReset	表单重置回调	`() => void`	`-`
renderActions	自定义操作按钮区域 render 函数	`(props: ActionsRenderProps) => ReactNode`	`-`
labelWidth	标签宽度，默认 66	`number`	`66`