GitHub 热门项目: input-otp

GitHub 项目：input-otp 仓库地址：https://github.com/guilhermerodz/input-otp 星级：3070 | 作者：吉尔赫梅罗德兹 项目描述：一次性密码输入。无障碍且无风格。 =================================================== 自述文件内容： # Web 中唯一可访问、无样式且功能齐全的输入 OTP 组件。 ### React ? 的 OTP 输入，作者：[@guilhermerodz](https://twitter.com/guilherme_rodz) 英雄赞助商?️

https://github.com/guilhermerodz/input-otp/assets/10366880/753751f5-eda8-4145-a4b9-7ef51ca5e453 ## 用法 ````bash npm 安装输入-otp ```` 然后导入组件。 ````差异 +“使用客户端” +从 'input-otp' 导入 { OTPInput } 函数 MyForm() { 返回<表单> + (...)} /> } ```` ## 默认示例 下面的示例使用 `tailwindcss` `@shadcn/ui` `tailwind-merge` `clsx`： ````tsx “使用客户端” 从 'input-otp' 导入 { OTPInput, SlotProps } ( <>

{slots.slice(0, 3).map((slot, idx) => ( <槽键={idx} {...槽} /> ))}

<假达世币/>

{slots.slice(3).map((slot, idx) => ( <槽键={idx} {...槽} /> ))}

)} /> // 随意复制。使用@shadcn/ui顺风颜色。 函数槽（道具：SlotProps）{ 返回（

{道具.char ?? props.placeholderChar}

{props.hasFakeCaret && }

） } // 您可以模拟假文本框插入符！ 函数 FakeCaret() { 返回（

） } // 受到 Stripe 的 MFA 输入的启发。 函数 FakeDash() { 返回（

← 返回 开源推荐