PinInput

Introduction

The PinInput component provides a secure and user-friendly interface for entering PIN codes, OTPs, or verification codes. It supports auto-focus management, masking, validation, custom lengths, variants, sizes, and full reactivity via Pulse signals. PinInput is ideal for authentication flows, secure access, and any scenario requiring multi-field code entry.

Import

import { PinInput } from '@odyssee/components';

LiveCodeEditor Examples

Basic PIN Input

Code Éditable

Résultat

With Label, Hint, and Error

Code Éditable

Résultat

Input Types: Numeric and Alphanumeric

Code Éditable

Résultat

Masked Input

Code Éditable

Résultat

Variants

Code Éditable

Résultat

Sizes

Code Éditable

Résultat

Focus Effects

Code Éditable

Résultat

States: Disabled, Readonly, Error

Code Éditable

Résultat

One-Time-Code (iOS Support)

Code Éditable

Résultat

Custom Regex Validation

Code Éditable

Résultat

OnComplete Callback

Code Éditable

Résultat

Props Table

Prop	Type	Default	Description
length	number	4	Number of input fields (digits/characters).
value	string | Signal<string>	—	PIN value (can be reactive signal).
placeholder	string	""	Placeholder for each input field.
disabled	boolean	false	Disables all input fields.
readonly	boolean	false	Makes all input fields read-only.
required	boolean	false	Marks the input as required.
masked	boolean	false	Masks input (shows password dots).
type	"alphanumeric" | "numeric"	"alphanumeric"	Restricts input to numbers or alphanumeric.
pattern	string	—	Custom regex pattern for validation.
variant	"default" | "gray" | "underline"	"default"	Visual style variant.
size	"sm" | "md" | "lg"	"md"	Size of the input fields.
focusEffect	"scale" | "none"	—	Visual effect on focus.
error	string	—	Error message displayed below the input.
label	string	—	Label displayed above the input.
hint	string	—	Optional hint text below the input.
onChange	(value: string) => void	—	Callback fired when the value changes.
onComplete	(value: string) => void	—	Callback fired when all fields are filled.
onFocus	(event: Event) => void	—	Callback fired when any input gains focus.
onBlur	(event: Event) => void	—	Callback fired when any input loses focus.
autoComplete	string	—	Autocomplete attribute (e.g., "one-time-code" for iOS).
className	string	—	Additional CSS classes for the root element.
id	string	auto-gen	Unique ID for the pin input container.
...rest	any	—	Other props are spread to the root element.

Implementation Notes

• Fully reactive: supports Pulse signals for value and state.
• Auto-focus management: moves focus to next field on input, previous on backspace.
• Paste support: pasting a code fills all fields.
• Masked mode for password-like PINs.
• Custom validation via type or pattern.
• Variants and sizes for flexible UI integration.
• Error, hint, and label are styled for clarity and accessibility.
• Supports iOS one-time-code autofill via autoComplete.

Accessibility

• Uses native <input> fields with proper labeling via for and id.
• Keyboard navigation: arrow keys, backspace, delete, tab supported.
• Error and hint messages are announced via text.
• Disabled and readonly states are visually and programmatically indicated.
• Supports ARIA attributes for status indication.
• Paste and auto-complete behaviors are accessible.

Best Practices

• Use length to match the expected code size (e.g., 4 or 6 digits).
• Prefer signals for reactive value management in authentication flows.
• Use masked for sensitive codes (PIN, password).
• Provide clear labels, hints, and error messages for guidance.
• Use onComplete to trigger verification or submission when code entry is finished.
• Enable autoComplete='one-time-code' for mobile autofill support.

Related Links

• Input component
• Pulse Framework documentation
• FormGroup component