Nudge Instead

条款错误提示

对比红字报错与轻晃条款整行的确认交互。

I accept the Terms & Conditions

条款错误提示 · Nudge Instead

Bad：红字打断。Good：只让未勾选项轻轻动一下。

交互方式

默认 Bad：未勾选点下一步，出现红字提示。切到 Good 再试，方框和文字一起轻晃；切换模式保留勾选状态。

使用示例

import { TermsNudge } from "@/components/ui/terms-nudge"

export function Demo() {
  return <TermsNudge onContinue={() => console.log("continue")} />
}

参数

参数	类型 / 默认值	说明
`checked`	`boolean`	外部控制勾选状态。
`defaultChecked`	`boolean`false	非受控模式的初始值。
`onCheckedChange`	`(checked: boolean) => void`	勾选状态变化回调。
`onContinue`	`() => void`	勾选后点继续时调用。
`label`	`ReactNode`"I accept the Terms & Conditions"	条款文字，可以放入链接。
`buttonLabel`	`string`"下一步"	继续按钮的文字。
`errorMessage`	`string`"You must accept the Terms & Conditions to continue."	错误说明；轻晃模式下仍向读屏软件提供。
`feedback`	`"nudge" \| "message"`"nudge"	轻晃提示或显示错误文字。
`disabled`	`boolean`false	禁用按钮与勾选框。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

安装内容

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

clsxtailwind-merge

components/ui/terms-nudge.css
components/ui/terms-nudge.tsx
lib/utils.ts