SearchForm 搜索表单

响应式搜索表单组件，支持动态列数、展开/收起功能。

安装

npm

yarn

pnpm

bun

deno

npx shadcn@latest add http://localhost:3000/r/search-form.json

通过 cols 属性配置不同屏幕尺寸下每行显示的列数。

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

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

属性	说明	类型	默认值
form	表单实例，如果不传入则内部创建	`FormInstance<unknown>`	`-`
cols	响应式列数配置，数字代表一行显示几个	`{ xs?: number; sm?: number; md?: number; lg?: number; xl?: number; xxl?: number; }`	`{ xs: 1, sm: 2, md: 3, lg: 4 }`
className	表单的 className	`string`	`-`
maxCount	最大显示数量，优先级高于 maxRows	`number`	`-`
maxRows	最大显示行数，默认 2	`number`	`2`
defaultCollapsed	默认是否收起，默认 true	`boolean`	`true`
collapsible	是否显示展开/收起按钮	`boolean`	`true`
resetText	重置按钮文本	`string`	`重置`
searchText	查询按钮文本	`string`	`查询`
onSearch	表单提交回调	`(values: Record<string, any>) => void`	`-`
onReset	表单重置回调	`() => void`	`-`
actions	操作按钮区域	`ReactNode`	`-`
labelWidth	标签宽度，默认 66	`number`	`66`

每个 breakpoint 的值代表该屏幕尺寸下一行显示的列数。