Form OTP Input

One-time password input connected to Form context with server validation errors.

Installation

bash

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

tsx

import { FormOtpInput } from "@/components/cs/form-otp-input"

tsx

<FormOtpInput name="code" maxLength={6} />

One-time password input connected to Form context with server validation errors.

Name	Type	Default	Description
children	ReactNode	-	Custom slots rendered inside the OTP input group.
containerClassName	string \| undefined	-	Additional classes applied to the OTP slot container.
defaultValue	string	-	Initial OTP value used before the field is changed.
inputClassName	string \| undefined	-	Additional classes applied to the OTP input control.
label	string \| undefined	-	Field label and fallback placeholder.
name *	string	-	Form field name used for submission and validation errors.
pattern	string \| undefined	-	You can also use `REGEXP_ONLY_CHARS`, `REGEXP_ONLY_DIGITS`, `REGEXP_ONLY_DIGITS_AND_CHARS`