`OtpInput` is a one-time password input component for verification codes.

Features:

- Composable slot-based architecture - Multiple visual variants (default, light, dark) - Support for disabled and invalid states - Flexible grouping with separators - Auto-focus and paste support - Full keyboard accessibility

Usage Guidelines:

- Use for OTP, PIN codes, or verification code inputs - Group slots logically (e.g., 3-3 or 4-2 patterns) - Provide clear feedback for invalid codes - Consider auto-submit on completion Basic: Demonstrates a standard 6-digit OTP input with separator.

This is the most common pattern for verification codes, split into two groups of 3 digits.

FourDigits: Demonstrates a 4-digit PIN code input.

Common for PIN codes or shorter verification codes. All slots in a single group without separator.

Controlled: Demonstrates controlled usage with value state.

Features:

- Value managed by React state - onComplete callback when all digits entered - onChange callback for each input change

Disabled: Demonstrates the disabled state.

Use when:

- Verification is in progress - User has exceeded attempt limits - The feature is temporarily unavailable

Invalid: Demonstrates the invalid/error state.

Use when:

- The entered code is incorrect - Validation fails - Provide feedback alongside error messages

Variants: Demonstrates different visual variants.

Features:

- default: Follows the page theme dynamically - light: Fixed light appearance - dark: Fixed dark appearance

CustomSeparator: Demonstrates custom separator content.

You can customize the separator content by passing children.

WithPattern: Demonstrates using regex pattern for input validation.

Use inputMode and pattern to restrict input types:

- numeric: Only numbers - text: Allow alphanumeric