Helps enter correctly and correct errors right in the information field.
Review progress
Compare information and presentation in context of use.
Try the operation, change the status and continue working.
Try specific scenarios when starting, changing, and completing tasks.
Progress is saved automatically in this browser.
GUIDANCE
Submit the form with a missing cell and then edit it using the keyboard. Keep the label visible, describe the request before entering it, and place the error close enough to know exactly which fields need to be fixed.
EXAMPLES
The box labeled “Email” and the error “Enter email as name@vidu.com”; The content just entered is kept for the user to edit one character.
The frame separates the input area from the background, keeping the content and cursor visible in both themes.
Try focus, autofill and text zoom; The frame does not cover text or jump in size.
Example The border of the email box becomes darker when focused, without changing the row height.
The label exists after the user types; Additional format instructions or conditions to know.
Enter data then read back cell names using screen reader; The label and hint are still linked correctly.
Example Label "Order code" with hint "Example: DZ-2048" below.
Distinguish illustration icons from actions such as showing passwords or deleting keywords.
Tab to cells and sub-buttons; the action has a clear name and does not delete data unintentionally.
Example Decorative magnifying glass icon; The Clear Search button receives focus and has a label.
Definition of empty, data, focus, readonly, disabled and error follow the same rules.
Switch from error to re-entry; error updates on time and data is not lost.
Example The readonly verification code box can still be copied; The sending cell has a waiting state.
Cell sizes follow the context of density, while font sizes and touch areas are still easy to use.
Place compact cells in tables and large cells on mobile; Text is not cut vertically.
Example The admin panel has a neat filter box; The login screen uses a higher box.
Only use multiple lines when the content needs to wrap, keeping scrolling and boundaries clear.
Paste the long paragraph and open the keyboard; the user still sees the input location and submit button.
Example The responsive cell expands with its content up to its limit and then scrolls within the cell.
