CoreUI PRO for React v5.23.0

Thursday, October 2, 2025

We are excited to announce CoreUI PRO for React v5.23.0 — a feature-rich release that introduces the brand new COneTimePassword component, enhanced autocomplete functionality, comprehensive documentation improvements, and significant dependency updates for better performance and security.

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

How to Upgrade

To update your project to CoreUI PRO for React v5.23.0, follow these steps:

Open your package.json.
Update the following dependencies:
- @coreui/react-pro to 5.23.0
- @coreui/coreui-pro to 5.21.0
Save the file.
Run your package manager:
- npm: npm install
- yarn: yarn install

🚀 What’s New

✨ New Component

COneTimePassword - Initial Release

Introducing the brand new COneTimePassword component for secure authentication workflows:

Multi-Format Support: Handles numeric, alphanumeric, and custom character sets
Flexible Input Count: Configurable number of input fields (2-12 fields)
Advanced Validation: Built-in validation with custom error handling
Accessibility First: Comprehensive ARIA support and keyboard navigation
Auto-Focus Management: Intelligent focus progression and backspace handling
Paste Support: Smart paste functionality with automatic field distribution
Customizable Styling: Full theming support with size variants
Form Integration: Seamless integration with form libraries and validation

// Basic OTP implementation
<COneTimePassword
  length={6}
  onComplete={(value) => console.log('OTP entered:', value)}
/>

// Advanced configuration
<COneTimePassword
  length={4}
  variant="numeric"
  size="lg"
  separator="-"
  placeholder="•"
  autoFocus
  invalid={hasError}
  feedback="Invalid code. Please try again."
  onComplete={handleOTPSubmission}
  onChange={handleOTPChange}
/>

// Custom styling with different formats
<COneTimePassword
  length={8}
  variant="alphanumeric"
  className="custom-otp"
  style={{ gap: '12px' }}
/>

COneTimePassword Features

Variant Support:
- numeric - Numbers only (0-9)
- alphanumeric - Letters and numbers
- alpha - Letters only
- custom - Custom character pattern
Size Variants: sm, lg, and default sizing
Visual Customization: Separators, placeholders, and custom styling
Event Handling: onChange, onComplete, onFocus, onBlur
Validation States: Invalid state with custom feedback messages
Accessibility Features:
- ARIA labels and descriptions
- Screen reader announcements
- Keyboard navigation support
- Focus management

🛠 Component Improvements

CAutocomplete

Indicator Rendering Fix: Resolved issue where indicator was always rendered
- Now only renders indicator when indicator prop is explicitly set to true
- Improved visual consistency and performance
- Better control over component appearance

// Indicator only shows when explicitly enabled
<CAutocomplete
  indicator={true}  // Now required to show indicator
  options={options}
/>

// No indicator rendered
<CAutocomplete
  options={options}
  // indicator prop omitted or false
/>

📚 Documentation Enhancements

API Documentation Updates

Enhanced API Generator: Updated documentation generation tools for better accuracy
Comprehensive API Documentation: Complete refresh of all component API documentation
COneTimePassword Documentation: Added comprehensive documentation including:
- Accessibility guidelines and WCAG compliance
- Implementation examples and use cases
- Best practices for OTP security
- Integration patterns with authentication flows

Content Improvements

Updated component examples and code snippets
Enhanced accessibility sections across all components
Improved implementation guides and troubleshooting tips
Better organization of documentation structure

📦 Dependency Updates

This release includes significant dependency updates for enhanced performance, security, and compatibility:

Core Dependencies

Updated @coreui/coreui-pro from ^5.20.0 to ^5.21.0

Documentation Tools

Updated @docsearch/css from ^4.0.1 to ^4.1.0
Updated @docsearch/react from ^4.0.1 to ^4.1.0

Development Tools

Updated @testing-library/jest-dom from ^6.8.0 to ^6.9.1
Updated @types/react from ^19.1.13 to ^19.2.0
Updated @types/react-dom from ^19.1.9 to ^19.2.0
Updated @typescript-eslint/parser from ^8.44.0 to ^8.45.0
Updated cross-env from ^10.0.0 to ^10.1.0
Updated eslint from ^9.35.0 to ^9.36.0
Updated eslint-plugin-react-hooks from ^5.2.0 to ^6.1.0
Updated globby from ^14.1.0 to ^15.0.0
Updated lerna from ^8.2.4 to ^9.0.0 (Major update)
Updated rollup from ^4.50.2 to ^4.52.3
Updated sass from ^1.92.1 to ^1.93.2
Updated ts-jest from ^29.4.2 to ^29.4.4
Updated typescript from ^5.9.2 to ^5.9.3
Updated typescript-eslint from ^8.44.0 to ^8.45.0

🎯 Enhanced User Experience

COneTimePassword Security Features

The new OTP component provides enterprise-grade security features:

Input Validation: Configurable character restrictions and length validation
Auto-Clear on Error: Optional automatic clearing on validation failure
Secure Input Handling: Prevents common input vulnerabilities
Rate Limiting Support: Compatible with backend rate limiting strategies
Accessibility Compliance: Full WCAG 2.1 AA compliance for authentication workflows

Authentication Workflow Integration

Perfect for various authentication scenarios:

Two-Factor Authentication (2FA): SMS and email verification codes
Multi-Factor Authentication (MFA): Additional security layer integration
Password Reset: Secure verification code entry
Account Verification: Email and phone number verification
Transaction Confirmation: Secure transaction authorization codes

Developer Experience Improvements

Enhanced development experience with:

TypeScript Support: Full type definitions for all new props and methods
Form Library Integration: Works seamlessly with popular form libraries
Validation Framework Support: Compatible with Yup, Joi, and other validation libraries
Testing Utilities: Built-in test IDs and ARIA labels for easier testing

💡 Migration Notes

New Component Usage

The COneTimePassword component is ready to use immediately:

import { COneTimePassword } from '@coreui/react-pro'

// Basic implementation
function LoginForm() {
  const [otp, setOtp] = useState('')

  return (
    <COneTimePassword
      length={6}
      onComplete={(value) => {
        setOtp(value)
        // Handle OTP submission
      }}
    />
  )
}

// Advanced implementation with validation
function SecureOTPForm() {
  const [otp, setOtp] = useState('')
  const [isValid, setIsValid] = useState(true)

  return (
    <COneTimePassword
      length={4}
      variant="numeric"
      size="lg"
      invalid={!isValid}
      feedback={!isValid ? "Invalid code. Please try again." : ""}
      onComplete={async (value) => {
        try {
          await verifyOTP(value)
          setIsValid(true)
        } catch (error) {
          setIsValid(false)
        }
      }}
    />
  )
}

CAutocomplete Update

For existing CAutocomplete implementations:

// Before v5.23.0 - indicator always rendered
<CAutocomplete options={options} />

// After v5.23.0 - explicit indicator control
<CAutocomplete
  options={options}
  indicator={true}  // Add this to show indicator
/>

No Breaking Changes

All changes are backward compatible except for the CAutocomplete indicator behavior, which is a visual improvement that may require explicit indicator enabling if you were relying on the always-visible indicator.

📖 Technical Details

COneTimePassword Implementation

The component is built with:

Modern React Patterns: Uses hooks and functional components
Performance Optimized: Minimal re-renders and efficient event handling
Memory Efficient: Proper cleanup and garbage collection
Cross-browser Compatible: Works across all modern browsers
Mobile Friendly: Touch-optimized input handling

Security Considerations

The OTP component includes several security best practices:

Input Sanitization: Automatic filtering of invalid characters
Clipboard Security: Secure paste handling with validation
Focus Management: Prevents focus-based timing attacks
Memory Protection: Secure handling of sensitive input data

Accessibility Features

Comprehensive accessibility support includes:

Screen Reader Support: Full ARIA label and description support
Keyboard Navigation: Arrow keys, Tab, Backspace, and Delete handling
Focus Indicators: Clear visual focus indication
High Contrast Support: Compatible with high contrast modes
Voice Control: Works with voice control software

Upgrade to CoreUI PRO for React v5.23.0 today to access the powerful new COneTimePassword component and enhanced autocomplete functionality. This release demonstrates our commitment to providing secure, accessible, and developer-friendly UI components.

📚 Learn More

For detailed documentation and implementation examples, visit: