Select UI framework
Get Started
Radix UI
AlertApp Store ButtonAspect RatioBadgeBannerBreadcrumbButton GroupButtonCheckboxCommand MenuCompactButtonDialogDrawerDropdown MenuEmptyFancy ButtonFile UploadHintInput OTPInputItemKbdLabelLinkButtonLoaderPopoverProgress BarProgress CircleRadio GroupRatingSelectSeparatorSkeletonSliderSocial ButtonSwitchTagTextareaToggle GroupToggleTooltip
Component input-otp-demo not found in registry.
Installation
pnpm add input-otpUsage
import * as InputOTP from "@/registry/radix-ui/ui/input-otp"
export function InputOTPExample() {
const [value, setValue] = useState("")
return (
<InputOTP.Root
value={value}
onChange={setValue}
maxLength={6}
render={({ slots }) => (
<InputOTP.Group>
{slots.map((slot, index) => (
<InputOTP.Slot key={index} {...slot} index={index} />
))}
</InputOTP.Group>
)}
/>
)
}Examples
Component input-otp-demo not found in registry.
Component input-otp-4-digit not found in registry.
Component input-otp-multiple-separators not found in registry.
Component input-otp-error not found in registry.
Component input-otp-disabled not found in registry.