Xamarin forms – iOS pin entry control

** Update : there is now also a new property ClearText that will show what you entered if needed

Most apps will have some kind of login feature, passing in credentials. Often this will be done with an Entry control set IsPassword to true.

But for a project we are working on, we needed a pin code entry… In other words, let the user see how many digits he has to enter and only allow numeric values.

So something like this:

PinEntry

To accomplish this, we created our own control. It’s a grid that will draw columns for the amount you’ve assigned to the PinLength property and it will add small dots and big dots. The big dots will become visible when the user enters digits.
Some other nice properties, you are able to hook up a Command that will be fired when the user has entered all required digits, this can be used to verify the pin.
The value of the pin is available in through the Input property.
There is also a Reset method to clear the input and redraw all small dots.

Example XAML usage:

For now I’ve only added the iOS implementation, this because there is currently no easy way to auto show the keyboard on Android. But a work around is to draw your own keyboard on screen and hook up the Input property of the Pin control.

All code and sample page can be found on my GitHub here…

Anyhow, hope this can be of any use!