Input OTP
A segmented input for one-time passwords and verification codes.
Input OTP wraps the Base UI OTP
Field primitive, renders
Separator between groups and marks each part with
data-slot.
Installation
npx shadcn@latest add @kosori/input-otpExample
input-otp-example.tsx
import { Field, FieldLabel } from '@/components/ui/field';
import { OTPField, OTPFieldInput } from '@/components/ui/input-otp';
const OTP_LENGTH = 6;
const OTP_SLOT_KEYS = Array.from(
{ length: OTP_LENGTH },
(_, i) => `otp-slot-${i}`
);
const InputOtpExample = () => (
<Field>
<FieldLabel className='sr-only'>One-time password</FieldLabel>
<OTPField length={OTP_LENGTH}>
{OTP_SLOT_KEYS.map((slotKey, index) => (
<OTPFieldInput
aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}
key={slotKey}
/>
))}
</OTPField>
</Field>
);
export default InputOtpExample;
Usage
import { OTPField, OTPFieldInput } from '@/components/ui/input-otp';
const InputOtpDemo = () => (
<OTPField length={6}>
<OTPFieldInput />
<OTPFieldInput />
<OTPFieldInput />
<OTPFieldInput />
<OTPFieldInput />
<OTPFieldInput />
</OTPField>
);