安装
pnpm dlx shadcn@latest add https://yiui.dev/r/auth-03.json--dry-run 或 --diff 看清差异再装。app/login-sms/page.tsx，安装后就是一个可以访问的路由。生产项目里请按需删除，或改成自己的路径。用法
<Auth03
brand={{ name: "我的工作台" }}
onSendCode={async (phone) => { await sendSms(phone) }}
onVerify={async ({ phone, code }) => { await verifySms(phone, code) }}
onSuccess={() => location.assign("/")}
onAlternative={() => location.assign("/password-login")}
/>先输入中国大陆手机号并确认协议，发送成功后才进入验证码步骤。第二步显示脱敏号码，输入完整验证码自动提交；修改号码返回第一步并保留手机号。onSendCode 与 onVerify 返回 Promise<void>，抛出的 Error.message 会显示在对应字段下。重发失败显示服务端错误，并提示达到每日上限时改用其他登录方式。
示例
演示验证码为 123456。手机号以 0000 结尾时模拟「发送太频繁」；验证码 000000（以及其他不匹配的验证码）模拟「验证码错误」。演示提示仅在页面外壳中显示。
API
发送短信，失败时抛出 Error；号码为不带区号的 11 位数字。
类型(phone: string) => Promise<void>验证短信，失败时抛出 Error。
类型(values: { phone: string; code: string; }) => Promise<void>验证成功后的通知。
类型(() => void) | undefined其他登录入口，由接入方处理导航。
类型((method: "password") => void) | undefined验证码位数。@default 6
类型number | undefined重发间隔秒数。@default 60
类型number | undefined是否必须同意协议。@default true
类型boolean | undefined协议链接；未提供时仅显示协议名称。
类型{ terms?: string; privacy?: string; } | undefined品牌名称和标志。
类型{ name: string; logo?: React.ReactNode; } | undefined覆盖默认中文文案。
类型Partial<{ title: string; description: string; steps: string; phoneStep: string; codeStep: string; phoneTitle: string; codeTitle: string; phone: string; send: string; sending: string; agreement: string; terms: string; and: string; privacy: string; agreementError: string; phoneError: string; sent: string; edit: string; code: string; verify: string; verifying: string; resend: string; countdown: string; failed: string; success: string; successDescription: string; alternative: string; limit: string; }> | undefined受控步骤。
类型Auth03Step | undefined初始步骤。@default "phone"
类型Auth03Step | undefined步骤变化通知。
类型((step: Auth03Step) => void) | undefined受控步骤：step="phone" | "code" 搭配 onStepChange；非受控使用 defaultStep，默认 phone。直接从 code 开始而没有发送记录时，提交会返回手机号步骤。验证码默认 6 位，可用 codeLength 设置 1–12 位；resendSeconds 默认 60 秒。requireAgreement 默认 true，agreementLinks 接收 terms、privacy 链接。
brand 接收 name 和可选 logo；labels 覆盖 Auth03Labels。onAlternative("password") 只通知接入方。导出类型为 Auth03Props、Auth03Step、Auth03Labels。
文件结构：auth-03.tsx 为入口，config.ts 管理文案，schemas.ts 校验手机号，form-parts.tsx 封装验证码格子，use-auth-form.ts 管理异步状态，types.ts 定义 API，page.tsx 为演示页面。
根节点 data-slot="auth-03" 暴露 data-step 和 data-state；步骤容器为 auth-03-step，验证码容器为 auth-03-code-input。
可访问性
- 协议未勾选时显示文字错误并聚焦复选框；按空格切换勾选。
- 切换步骤或成功状态时聚焦标题，Tab 可进入表单。
- 官方验证码输入支持整串粘贴、退格和方向键，提供数字键盘、短信自动填充与「验证码，共 6 位」读屏名称。
- 验证错误通过
aria-describedby关联，所有格子带错误态；重新输入立即清除。 - 倒计时不逐秒播报；动效遵守减少动态效果设置。
注意事项
只提供界面，不负责真实认证、短信发送、限流、会话或跳转。服务端必须校验验证码、有效期和发送次数。手机号组件目前只支持中国大陆固定 +86 区号。