Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs OTP

Siticone OTP

The SiticoneOtp is a highly secure and interactive One-Time Password (OTP) input control. Designed for authentication workflows, it features separated digit boxes with auto-focus, paste support, validation patterns, and built-in security mechanisms like auto-clearing sensitive data.

Security Features

Built-in mechanisms to protect sensitive data entry, making it suitable for banking, 2FA, and PIN entry interfaces.

Property Type Description & Usage
AutoClearEnabled bool otp.AutoClearEnabled = true; Automatically wipes the input after a set delay. Essential for shared devices or high-security environments.
AutoClearDelaySeconds int otp.AutoClearDelaySeconds = 30; The countdown duration (in seconds) before the input self-destructs. Resets on new input.
ReadOnly bool otp.ReadOnly = true; Locks the control against modification. Useful for displaying static codes or freezing input during API validation.
ReadonlyBackColor Color otp.ReadonlyBackColor = Color.LightGray; A subtle overlay color applied when in ReadOnly mode to visually indicate the locked state.

Layout & Appearance

Customize the geometry and visual style of the digit boxes.

Property Type Description
DigitCount int Number of input boxes (Default: 6). Supports 3 to 1000 digits.
DigitSize Size Dimensions of each individual digit box (e.g., 40x40).
DigitSpacing int Gap in pixels between digit boxes.
BoxPadding int Padding inside the control container.
CornerRadius... int Individual control over TopLeft, TopRight, BottomLeft, BottomRight radii for box shaping.
GlowColor Color The animated focus color that pulses around the active digit box.
BorderColor Color Color of the box outlines in idle state.
BoxFillColor Color Background fill color for the digit boxes.

Validation & Feedback

Strict controls on what characters are accepted, with visual and auditory feedback for errors.

Property Type Description
InputMask string Standard mask characters: 9 (Digit), A (Letter), H (Hex). Used to auto-generate a regex pattern.
ValidationPattern string Custom Regex pattern (e.g., ^[0-9]$). Validated against each keystroke.
StrictValidation bool If true, invalid characters are instantly rejected and trigger feedback.
CanShake bool Triggers a "No" shake animation on invalid input or clicks when ReadOnly.
CanBeep bool Plays a system sound on invalid operations.

Data Access

Properties for retrieving the entered code in various formats and checking input state.

Property Type Description
Code / Value string The raw concatenated string of entered digits.
GetCodeAsInt int Parses the code to an integer. Returns -1 if invalid or incomplete.
IsComplete bool True if all digit boxes are filled.
FormattedCode string Returns the code joined by CodeSeparator, with placeholders for empty slots.

Events

Rich event system for reacting to user input and control lifecycle changes.

InputCompleted Event
// Fired immediately when the last digit is filled.
// Ideal for auto-submitting forms.
otpControl.InputCompleted += (s, e) => 
{
                Console.WriteLine($"Code Entered: {e.EnteredCodeAsString}");
                VerifyCode(e.EnteredCodeAsString);
};
DigitEntered Event
// Fired for every valid keystroke.
otpControl.DigitEntered += (s, e) => 
{
                Console.WriteLine($"Digit '{e.Digit}' entered at index {e.Index}");
                if (e.IsComplete) 
    {
                // Optional: Change UI color to indicate completion
        otpControl.BorderColor = Color.Green;
    }
};
AutoClearWarning Event
// Fired 5 seconds before the AutoClear timer expires.
// Allows you to warn the user or cancel the clear operation.
otpControl.AutoClearWarning += (s, e) => 
{
    lblStatus.Text = $"Security timeout in {e.RemainingSeconds} seconds!";
    
                // To cancel the clear:
                // e.Cancel = true; 
};

Public Methods

Clear()
// Resets the control, clears all digits, stops timers, and resets focus.
siticoneOtp1.Clear();
ValidateCode(pattern)
// Checks the current complete code against a regex pattern.
bool isValid = siticoneOtp1.ValidateCode("^[0-9]{6}$");

Usage Examples

Example 1: Basic 6-Digit PIN Setup

Standard configuration for a numeric PIN entry.

C# - PIN Setup
private void SetupPinControl()
{
    otpPin.DigitCount = 6;
    otpPin.DigitSize = new Size(45, 55);
    otpPin.DigitSpacing = 12;
    
                // Restrict to numbers only
    otpPin.InputMask = "9"; 
    
                // Visuals
    otpPin.CornerRadius = 6;
    otpPin.BorderColor = Color.LightSlateGray;
    otpPin.GlowColor = Color.DodgerBlue;
}

Example 2: Secure 2FA Token

Configuration for handling high-security 2FA tokens with auto-clear.

C# - Secure Token
private void SetupSecureToken()
{
                // Enable Security Features
    otpToken.AutoClearEnabled = true;
    otpToken.AutoClearDelaySeconds = 45;
    
                // Feedback
    otpToken.CanShake = true;
    otpToken.CanBeep = true;
    
                // Handle completion automatically
    otpToken.InputCompleted += (s, e) => 
    {
                StartVerificationSpinner();
                VerifyTokenAsync(e.EnteredCodeAsString);
        
                // Lock input during verification
        otpToken.ReadOnly = true;
    };
}

Example 3: Dynamic Theming

Using the built-in action list methods to switch themes programmatically.

C# - Theming
private void ApplyTheme(bool isDarkMode)
{
                // You can access the designer action list logic or set properties directly
                if (isDarkMode)
    {
        otpControl.BackColor = Color.Transparent;
        otpControl.BoxFillColor = Color.FromArgb(40, 40, 40);
        otpControl.ForeColor = Color.White;
        otpControl.BorderColor = Color.Gray;
        otpControl.GlowColor = Color.Cyan;
    }
                else
    {
        otpControl.BoxFillColor = Color.White;
        otpControl.ForeColor = Color.Black;
        otpControl.BorderColor = Color.LightGray;
        otpControl.GlowColor = Color.Blue;
    }
    
                // Force redraw
    otpControl.Invalidate();
}

Designer Support

The control includes a comprehensive Smart Tag menu in Visual Studio.

Category Features
Themes One-click application of 12+ presets (Light, Dark, Blue, Green, Material, etc.).
Layout Quick sliders for Digit Count, Spacing, Padding, and Corner Radius.
Security Toggles for Auto-Clear, Read-Only, Shake, and Beep.
Settings Copy/Paste settings between multiple OTP controls on your form.