FormOTPDemo() — ui Function Reference

Architecture documentation for the FormOTPDemo() function in field-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ FormOTPDemo() — ui Function Reference

Dependency Diagram

graph TD
  f3c615e3_e7b2_ade7_9b6b_d78c5f10355e["FormOTPDemo()"]
  b9b36d9d_9701_6134_d4ee_41213e7f1788["field-demo.tsx"]
  f3c615e3_e7b2_ade7_9b6b_d78c5f10355e -->|defined in| b9b36d9d_9701_6134_d4ee_41213e7f1788
  style f3c615e3_e7b2_ade7_9b6b_d78c5f10355e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/field-demo.tsx lines 2755–2889

export function FormOTPDemo() {
  const [value, setValue] = useState("")
  const [pinValue, setPinValue] = useState("")

  return (
    <Card>
      <CardHeader>
        <CardTitle>OTP Input Fields</CardTitle>
        <CardDescription>Different OTP input configurations</CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <Field>
            <FieldLabel htmlFor="basic-otp">Verification Code</FieldLabel>
            <InputOTP id="basic-otp" maxLength={6}>
              <InputOTPGroup>
                <InputOTPSlot index={0} />
                <InputOTPSlot index={1} />
                <InputOTPSlot index={2} />
                <InputOTPSlot index={3} />
                <InputOTPSlot index={4} />
                <InputOTPSlot index={5} />
              </InputOTPGroup>
            </InputOTP>
          </Field>
          <Field>
            <FieldLabel htmlFor="otp-with-desc-5xp">Enter OTP</FieldLabel>
            <InputOTP
              id="otp-with-desc-5xp"
              maxLength={6}
              value={value}
              onChange={setValue}
            >
              <InputOTPGroup>
                <InputOTPSlot index={0} />
                <InputOTPSlot index={1} />
                <InputOTPSlot index={2} />
                <InputOTPSlot index={3} />
                <InputOTPSlot index={4} />
                <InputOTPSlot index={5} />
              </InputOTPGroup>
            </InputOTP>
            <FieldDescription>
              Enter the 6-digit code sent to your email.
            </FieldDescription>
          </Field>
          <Field>
            <FieldLabel htmlFor="otp-separator-h39">
              Two-Factor Authentication
            </FieldLabel>
            <InputOTP id="otp-separator-h39" maxLength={6}>
              <InputOTPGroup>
                <InputOTPSlot index={0} />
                <InputOTPSlot index={1} />
                <InputOTPSlot index={2} />
              </InputOTPGroup>
              <InputOTPSeparator />
              <InputOTPGroup>
                <InputOTPSlot index={3} />
                <InputOTPSlot index={4} />
                <InputOTPSlot index={5} />
              </InputOTPGroup>
            </InputOTP>
            <FieldDescription>
              Enter the code from your authenticator app.
            </FieldDescription>
          </Field>
          <Field>
            <FieldLabel htmlFor="pin-input-lqx">PIN Code</FieldLabel>
            <InputOTP
              id="pin-input-lqx"
              maxLength={4}
              pattern={REGEXP_ONLY_DIGITS}
              value={pinValue}
              onChange={setPinValue}
            >
              <InputOTPGroup>
                <InputOTPSlot index={0} />
                <InputOTPSlot index={1} />
                <InputOTPSlot index={2} />
                <InputOTPSlot index={3} />