Input OTP

One-time-code input with paste and SMS autofill support, no dependencies.

Import

tsx

import { InputOTP } from "@indoku/ui"

Examples

Basic usage

Value: (kosong)

tsx

function InputOtpDemo() {  const [otp, setOtp] = useState("")  return (    <Stack gap="4">      <InputOTP.Root maxLength={6} value={otp} onChange={setOtp}>        <InputOTP.Group>          {[0, 1, 2].map((i) => (            <InputOTP.Slot key={i} index={i} />          ))}        </InputOTP.Group>        <InputOTP.Separator />        <InputOTP.Group>          {[3, 4, 5].map((i) => (            <InputOTP.Slot key={i} index={i} />          ))}        </InputOTP.Group>      </InputOTP.Root>      <Text fontSize="xs" color="fg.muted">        Value: {otp || "(kosong)"}      </Text>    </Stack>  )}

Props

Root

Prop	Type	Default	Description
`maxLength*`	`number`	–
`value`	`string`	–
`defaultValue`	`string`	–
`onChange`	`(value: string) => void`	–
`onComplete`	`(value: string) => void`	–	Called as soon as every slot is filled.
`pattern`	`RegExp`	`digits only`	Allowed characters (tested per character). Use `REGEXP_ONLY_DIGITS`, `REGEXP_ONLY_CHARS` or `REGEXP_ONLY_DIGITS_AND_CHARS`.
`disabled`	`boolean`	–
`invalid`	`boolean`	–
`inputMode`	`"numeric" \| "text" \| "tel" \| "decimal" \| "email" \| "search" \| "url" \| "none"`	–	Virtual keyboard hint. Defaults to `numeric` for the digits pattern, otherwise `text`.
`name`	`string`	–
`autoFocus`	`boolean`	–

Slot

Prop	Type	Default	Description
`index*`	`number`	–

* required. Style props and HTML attributes are accepted as well.

← Toggle Group Pin Input →

Created by @indokudev