Respect their progress.
Retain the entered value after a validation error. Announce the correction and keep the control in a predictable place.
Cloaked Design SystemPatterns
Create a protected email
From a small form to a reassuring outcome. A complete example of Cloaked components, content, and interaction working together.
Implementation previewOne task. A clear beginning and end.
Enter a label, try validation, and continue to the confirmation. This runs locally; no email address or account is created.
Try the controls. Your changes stay in this example.Open example
Make each transition understandable
The pattern connects component behavior with a useful sequence.
- 01
Name it
Ask for a recognizable label and explain how it will be used.
- 02
Help correct it
Keep the value and give a specific correction next to the field.
- 03
Show progress
Prevent duplicate submissions and preserve the action’s accessible name.
- 04
Confirm clearly
Show the outcome and the next useful action.
A few parts, working together
Use the same definitions from the component pages. Keep the application behavior explicit.
FieldPersistent name, helper, corrective messageInputNative editing and controlled valueButtonOne primary action, loading, disabled state
Connect production behavior deliberately.
This example simulates completion. A product implementation must provide its own authenticated service, request errors, and address creation.
Carry the decisions into code
The same component contract supports a person reading the page and an agent implementing it.
Agent handoff
Build the protected-email pattern using the Cloaked design system. Read https://design.cloaked.team/data/patterns/protected-email.json first. Use the documented component API and semantic tokens. Preserve keyboard access, clear labels, and validation behavior. Treat this implementation as a review preview; report any missing requirements.