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

Component NameAn 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 ColorText color when focused
Focused Border WidthBorder width of the cell when focused
Cell CountThe number of code input cells to display. i.e. the number of digits/characters of the code
Blur on FullWhen code input is full, automatically blur/unfocus from the input
Keyboard TypeDetermines what keyboard is given to the user.
Clear on Cell FocusWhen cell is focused/clicked, clears the input starting from that cell to the end
Focused Border ColorBorder color of the cell when focused
Change Text DelayDelay after editing has stopped before executing 'On Change Text Delayed' trigger
Focused Background ColorBackground color of the cell when focused
Password Input?When enabled, the user input is hidden on the screen and is displayed with '●'

Data Properties

Data SourceAttach 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.


On Input FullRuns when input is full
On Change TextRuns when text is changed
On Return KeyRuns when the text is submitted with Return Key
On FocusRuns when the input is focused
On BlurRuns when the input is blurred (unfocused)
On Change Text DelayedRuns after a given delay from when editing has stopped (debounce)