887 B
887 B
Storyboard: Password Field
Example storyboard specification for the WDS course
Coming Soon
This is an example storyboard referenced from Module 11 Tutorial. It will demonstrate a complete behavior storyboard for a password field component.
State Transitions
| From | To | Trigger | Duration | Visual |
|---|---|---|---|---|
| Default | Focused | Click/Tab | Instant | Blue border |
| Focused | Typing | Keypress | Instant | Strength indicator appears |
| Typing | Visible | Eye icon click | Instant | Text revealed, icon toggles |
| Visible | Hidden | Eye icon click | Instant | Dots replace text |
Strength Indicator
| Strength | Color | Label |
|---|---|---|
| Weak | Red | "Weak" |
| Fair | Orange | "Fair" |
| Strong | Green | "Strong" |
This is a teaching example for the WDS course.