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:

• 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.