Course lesson
Model the Basic Events, Actions, and Transitions of a Pin Input Component
A pin input is a common UI pattern that has more state than you might initially think. We have a handful of use-cases to think through when modeling a state machine that will power a pin input. It should:
- Duration
- 3 min
- Access
- Free
- Transcript
- Retained from source evidence
A pin input is a common UI pattern that has more state than you might initially think. We have a handful of use-cases to think through when modeling a state machine that will power a pin input. It should:
- Automatically focus the next field on typing and focuses the previous field on deletion.
- Support numeric and alphanumeric values.
- Support for copy/paste to autofill all fields.
We’ll break down the interactions and logic of a pin input component, detailing its state and transitions as well as talk through the actions that will be emitted when certain events are fired.