Components
AbbreviateNumberActionLinkAdaptiveCardAffixAuthorityCheckCalendarViewChartConfirmDialogContainerCustomFormatInputDataTableDebounceInputDoubleSidedImageEllipsisButtonGanttChartGrowShrinkValueIconTextImageGalleryLoadingMasonryMediaSkeletonNavToggleNumericInputOtpInputPasswordInputPatternInputRegionMapRichTextEditorSegmentItemOptionStickyFooterSyntaxHighlighterUsersAvatarGroup
OtpInput
The OtpInput component provides an easy way to implement input fields for multi-digit one-time passwords (OTP) or verification codes. It is designed to handle the input of sequential digits, enabling seamless user experiences for forms requiring OTP input.
Basic
Basic usage of OtpInput
Length
OtpInput can adapt to different OTP lengths using the
length propAPI
FormNumericInput
| Prop | Description | Type | Default |
|---|---|---|---|
| autoFocus | Whether the Input is focused automatically | boolean | - |
| disabled | Whether the Input is disabled | boolean | - |
| invalid | Whether the Input is invalid status | boolean | - |
| inputClass | Class for all input fields | string | - |
| length | Length of input field | number | - |
| onChange | Callback when Input value changed | (value: string) => void | - |
| placeholder | Placeholder text for all input fields | string | - |
| value | Controlled Input value | string | - |