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.
// 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);
};
// 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;
}
};
// 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
// Resets the control, clears all digits, stops timers, and resets focus.
siticoneOtp1.Clear();
// 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.
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.
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.
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. |