Koori UI
Components

GlassInputOTP

Accessible one-time-password input split into individual slots.

Preview

Usage

import {
  GlassInputOTP,
  GlassInputOTPGroup,
  GlassInputOTPSlot,
  GlassInputOTPSeparator,
} from "koori-ui";
import { useState } from "react";
 
const [value, setValue] = useState("");
 
<GlassInputOTP maxLength={6} value={value} onChange={setValue}>
  <GlassInputOTPGroup>
    <GlassInputOTPSlot index={0} />
    <GlassInputOTPSlot index={1} />
    <GlassInputOTPSlot index={2} />
  </GlassInputOTPGroup>
  <GlassInputOTPSeparator />
  <GlassInputOTPGroup>
    <GlassInputOTPSlot index={3} />
    <GlassInputOTPSlot index={4} />
    <GlassInputOTPSlot index={5} />
  </GlassInputOTPGroup>
</GlassInputOTP>

Props

GlassInputOTP

PropTypeDefaultDescription
maxLengthnumber—Total number of characters
valuestring—Controlled value
onChange(value: string) => void—Fired when the value changes
onComplete(value: string) => void—Fired when maxLength is reached
disabledbooleanfalseDisable the input
containerClassNamestring—Class applied to the slots container

GlassInputOTPSlot

PropTypeDefaultDescription
indexnumber—Zero-based index of the slot in the OTP string

All input-otp props are also supported.

Previous

GlassHoverCard

Next

GlassLabel

On this page