# Input-OTP Input - OTP component consists of multiple input fields designed for entering a one-time password. It automatically advances focus between fields and provides clear feedback for a secure and seamless verification experience. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-input-otp--introduction ## Variants documented in Storybook - InputStates: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-input-otp--inputstates - FeedbackStates: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-input-otp--feedbackstates ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Input-OTP. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Feedback States — Feedback States HTML: ```html
Enter OTP
Verification successful
Enter OTP
Attempt 2 of 3 Resend OTP in 00:17
Enter OTP
Locked for 28:43 Resend OTP
``` React: ```jsx import React from 'react'; const InputOTPExample1Demo = () => ( <> {/* Variant: OTP Feedback State - Success */}
Enter OTP
done Verification successful
{/* Variant: OTP Feedback State - Error */}
Enter OTP
error Attempt 2 of 3 Resend OTP in 00:17
{/* Variant: OTP Feedback State - Locked Out */}
Enter OTP
lock Locked for 28:43 Resend OTP
); export default InputOTPExample1Demo; ``` Angular: ```html
Enter OTP
Verification successful
Enter OTP
Attempt 2 of 3 Resend OTP in 00:17
Enter OTP
Locked for 28:43 Resend OTP
``` ### 2. Input States — Input States HTML: ```html
Enter OTP
Didn't receive OTP? Resend in 00:17
Enter OTP
Didn't receive OTP? Resend in 00:17
Enter OTP
Didn't receive OTP? Resend in 00:17
``` React: ```jsx import React from 'react'; const InputOTPExample2Demo = () => ( <> {/* Variant: OTP Input State - default */}
Enter OTP
Didn't receive OTP? Resend in 00:17
{/* Variant: OTP Input State - Partially Filled */}
Enter OTP
Didn't receive OTP? Resend in 00:17
{/* Variant: OTP Input State - All Filled */}
Enter OTP
Didn't receive OTP? Resend in 00:17
); export default InputOTPExample2Demo; ``` Angular: ```html
Enter OTP
Didn't receive OTP? Resend in 00:17
Enter OTP
Didn't receive OTP? Resend in 00:17
Enter OTP
Didn't receive OTP? Resend in 00:17
``` ### 3. Introduction — Introduction HTML: ```html
Components

Input OTP

Input - OTP component consists of multiple input fields designed for entering a one-time password. It automatically advances focus between fields and provides clear feedback for a secure and seamless verification experience.

Input OTP Showcase

Source-backed examples covering standard OTP inputs.

Enter OTP
Didn't receive OTP? Resend in 00:17

CSS Class Reference

Quickly copy source-backed utility classes for OTP structure and state patterns.

OTP Classes

Base OTP container ux4g-otp
OTP label ux4g-otp-label
OTP inputs group ux4g-otp-group
Hidden source input ux4g-otp-source
Metadata container ux4g-otp-meta
Status indicator ux4g-otp-status
Resend button ux4g-otp-resend
Success state wrapper ux4g-otp-success
Error state wrapper ux4g-otp-error
Locked out wrapper ux4g-otp-locked
``` React: ```jsx import React from 'react'; const InputOTPExample3Demo = () => ( <>
Components

Input OTP

Input - OTP component consists of multiple input fields designed for entering a one-time password. It automatically advances focus between fields and provides clear feedback for a secure and seamless verification experience.

Input OTP Showcase

Source-backed examples covering standard OTP inputs.

Enter OTP
Didn't receive OTP? Resend in 00:17

CSS Class Reference

Quickly copy source-backed utility classes for OTP structure and state patterns.

OTP Classes

Base OTP container ux4g-otp
OTP label ux4g-otp-label
OTP inputs group ux4g-otp-group
Hidden source input ux4g-otp-source
Metadata container ux4g-otp-meta
Status indicator ux4g-otp-status
Resend button ux4g-otp-resend
Success state wrapper ux4g-otp-success
Error state wrapper ux4g-otp-error
Locked out wrapper ux4g-otp-locked
); export default InputOTPExample3Demo; ``` Angular: ```html
Components

Input OTP

Input - OTP component consists of multiple input fields designed for entering a one-time password. It automatically advances focus between fields and provides clear feedback for a secure and seamless verification experience.

Input OTP Showcase

Source-backed examples covering standard OTP inputs.

Enter OTP
Didn't receive OTP? Resend in 00:17

CSS Class Reference

Quickly copy source-backed utility classes for OTP structure and state patterns.

OTP Classes

Base OTP container ux4g-otp
OTP label ux4g-otp-label
OTP inputs group ux4g-otp-group
Hidden source input ux4g-otp-source
Metadata container ux4g-otp-meta
Status indicator ux4g-otp-status
Resend button ux4g-otp-resend
Success state wrapper ux4g-otp-success
Error state wrapper ux4g-otp-error
Locked out wrapper ux4g-otp-locked
``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.