PIN Input

A customizable input for PIN, authentication, 2FA, access, and other kinds of codes.

How to use

The PIN input behaves similarly to a Text Input, in that it accepts input from the user via their keyboard and then assigns that value to a Screen Variable which is created when you add the component to your screen. You can then use that variable however you like.

The PIN Input has a prop in the Config panel that lets you control the number of cells that comprise the input. Cells can be styled using the Styles panel. Additional optional styling for focused state is available in the Config panel.

There's several Triggers available as well so you can perform Actions when users interact with the component in different ways.

Style Properties

Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.

Configuration Properties

Name	Description
Component Name	An optional descriptive name for the component. If the name is not "Pin Input", it will appear as a comment above this component in the generated code.
Focused Text Color	Text color when focused
Focused Border Width	Border width of the cell when focused
Cell Count	The number of code input cells to display. i.e. the number of digits/characters of the code
Blur on Full	When code input is full, automatically blur/unfocus from the input
Keyboard Type	Determines what keyboard is given to the user.
Clear on Cell Focus	When cell is focused/clicked, clears the input starting from that cell to the end
Focused Border Color	Border color of the cell when focused
Change Text Delay	Delay after editing has stopped before executing 'On Change Text Delayed' trigger
Focused Background Color	Background color of the cell when focused
Password Input?	When enabled, the user input is hidden on the screen and is displayed with '●'

Data Properties

Name	Description
Data Source	Attach this component to a variable, or configure an initial value.

Conditional Display

You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.

Triggers

Name	Description
On Input Full	Runs when input is full
On Change Text	Runs when text is changed
On Return Key	Runs when the text is submitted with Return Key
On Focus	Runs when the input is focused
On Blur	Runs when the input is blurred (unfocused)
On Change Text Delayed	Runs after a given delay from when editing has stopped (debounce)