Login Form
登录表单
The form that gets users in: account + password or code, clear errors, optional social sign-in.
All platformsAccountContent areaComponent
大白话说明
登录表单是转化漏斗最窄的一环:账号、密码两个字段打底,验证码登录和第三方登录做备选,忘记密码入口贴身放,协议勾选合规前置。报错要具体到字段,告诉用户错在哪、怎么改。
什么时候用
任何需要账号的产品的入口页;注册表单是在它基础上加确认与协议,不另起炉灶。
什么时候不用
能用游客模式先体验的产品,别在打开第一屏就堵登录墙——先给价值,再要账号。
细节与变体
- 密码框带「眼睛」切换可见,验证码带倒计时重发
- 键盘类型要对:手机号调数字键盘,邮箱关自动大写
- 登录按钮在输入不完整时置灰,但别隐藏——用户要知道还差什么
配套效果见下方「可用效果」。
Matching prompt (fill in & copy)
Effects you can apply
Reference implementations (open source)
- shadcn/ui ↗ MIT · 免费(MIT)
Copy-paste component source built on Radix and Tailwind — you own the code, and AI tools know it best.
- Mantine ↗ MIT · 免费(MIT)
A batteries-included React library: 100+ components and hooks, even date pickers.
- React Native Template Obytes ↗ MIT · 免费(MIT)
A production-grade Expo starter: navigation, state, forms, and tests preconfigured.