OTP Input

One-time password input with optional label, validation message, and generated slots.

Installation

bash

pnpm dlx shadcn@latest add @cs/otp-input

tsx

import { OtpInput } from "@/components/cs/otp-input";

tsx

<OtpInput name="verification-code" label="Verification code" maxLength={6} />

One-time password input with an optional label, validation message, and generated input slots.

Name	Type	Default	Description
children	React.ReactNode	-	Custom slots rendered inside the OTP input group.
containerClassName	string	-	Additional classes applied to the OTP slot container.
error	string \| null	-	Validation error message for the field.
inputClassName	string	-	Additional classes applied to the OTP input control.
label	string	-	Field label and fallback placeholder.
pattern	string	-	You can also use `REGEXP_ONLY_CHARS`, `REGEXP_ONLY_DIGITS`, `REGEXP_ONLY_DIGITS_AND_CHARS`