SecurityPin

A PIN entry control with individually rendered cells that captures input through a hidden Entry. Digits are visible by default and can optionally be masked with any character for password-style entry.

• 
• 

Frameworks

.NET MAUI

Blazor

MAUI

Blazor

Partially entered pin	Six digits, masked

Basic Usage

<!-- Visible 4-digit numeric PIN -->
<shiny:SecurityPin Length="4"
                   Value="{Binding Pin}"
                   Keyboard="Numeric" />

<!-- Masked 6-digit PIN with '*' -->
<shiny:SecurityPin Length="6"
                   HideCharacter="*"
                   Value="{Binding Pin}"
                   Keyboard="Numeric" />

<!-- Alphanumeric PIN masked with bullets -->
<shiny:SecurityPin Length="5"
                   HideCharacter="●"
                   Value="{Binding Pin}"
                   Keyboard="Default" />

Completion Event

<shiny:SecurityPin x:Name="Pin"
                   Length="4"
                   Value="{Binding Pin}"
                   Completed="OnPinCompleted" />

void OnPinCompleted(object? sender, SecurityPinCompletedEventArgs e)
{
    var enteredValue = e.Value;
    // verify the PIN
}

Properties

Property	Type	Default	Description
Length	int	4	Number of PIN cells
Value	string	""	Current PIN value (TwoWay)
Keyboard	Keyboard	Numeric	Keyboard type for input
HideCharacter	string?	null	When set, masks entered characters; when null or empty, shows actual values
CellSize	double	50	Width/height of each cell
CellSpacing	double	8	Space between cells
CellCornerRadius	double	8	Border corner radius
CellBorderColor	Color?	null	Cell border color
CellFocusedBorderColor	Color?	null	Border color for the active cell
CellBackgroundColor	Color?	null	Cell fill color
CellTextColor	Color?	null	Entered character color
FontSize	double	24	Character font size
UseFeedback	bool	true	Haptic click on each digit entry, long-press on completion

Events

Event	Args	Description
Completed	SecurityPinCompletedEventArgs	Fires when the entered value length reaches Length

Methods

Method	Description
Focus()	Focus the hidden Entry and bring up the keyboard
Unfocus()	Dismiss the keyboard
Clear()	Reset the value to empty

Styling

<shiny:SecurityPin Length="4"
                   HideCharacter="●"
                   CellSize="48"
                   CellSpacing="10"
                   CellCornerRadius="12"
                   CellBorderColor="LightGray"
                   CellFocusedBorderColor="DodgerBlue"
                   CellBackgroundColor="#F5F5F5"
                   CellTextColor="Black"
                   FontSize="22"
                   Value="{Binding Pin}" />

Behavior Notes

• A hidden Entry captures keyboard input; tapping any cell focuses it and brings up the keyboard
• MaxLength on the internal Entry is kept in sync with Length
• Changing Length rebuilds the cells; a longer Value is truncated
• The currently focused cell shows CellFocusedBorderColor when set
• When HideCharacter is null or empty, the actual entered character is displayed

Blazor Usage

@using Shiny.Blazor.Controls

<SecurityPin Length="4"
             HideCharacter="●"
             Value="@pin"
             ValueChanged="v => pin = v"
             Completed="OnCompleted"
             CellSize="48"
             CellSpacing="10"
             CellCornerRadius="12"
             CellBorderColor="#D1D5DB"
             CellFocusedBorderColor="#3B82F6"
             CellBackgroundColor="#F5F5F5"
             CellTextColor="black" />

@code {
    string pin = "";

    void OnCompleted(string value)
    {
        // Verify the PIN
    }
}

Note

On Blazor, colors are CSS strings. Value uses ValueChanged callback for two-way binding. Completed is EventCallback<string> instead of an event with SecurityPinCompletedEventArgs. Keyboard is not applicable on Blazor.

AI Skill

Claude CodeGitHub Copilot

Step 1 — Add the marketplace:

claude plugin marketplace add shinyorg/skills

Step 2 — Install the plugin:

claude plugin install shiny@shiny

One plugin installs all 35 Shiny skills. Your agent loads only the skill relevant to what you're building, so there's no cost to having them all available.

Step 1 — Add the marketplace:

copilot plugin marketplace add https://github.com/shinyorg/skills

Step 2 — Install the plugin:

copilot plugin install shiny@shiny

One plugin installs all 35 Shiny skills. Your agent loads only the skill relevant to what you're building, so there's no cost to having them all available.

View shiny-controls Skill