Mobile UI design

Form error · shake, red, a line underneath

Submit with a field empty and that field shakes side to side, its border turns red with a warning icon, and a short message slides out underneath. Start typing a valid value and the error clears by itself — no second submit — while the field shows its focus colour.

What it is

Form feedback that is hard to miss and quick to forgive: the empty field shakes, turns red and explains itself, and the warning disappears as soon as you type a valid answer.

Full library — live sample, numbers, prompt and source — is for clients. I have the password

Seen in

@叨叨AI (Douyin) · 第 12 集「8 个让 App 和小程序变高级的组件交互」 · 07 输入错误提示 Error