InputOTPFields() — ui Function Reference

Architecture documentation for the InputOTPFields() function in field-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ InputOTPFields() — ui Function Reference

Dependency Diagram

graph TD
  e0bafb7a_47af_da1c_08ab_7e0cfe5c227c["InputOTPFields()"]
  0c6bcf2e_fcfc_3202_c84d_ba133cbc5e3f["field-example.tsx"]
  e0bafb7a_47af_da1c_08ab_7e0cfe5c227c -->|defined in| 0c6bcf2e_fcfc_3202_c84d_ba133cbc5e3f
  style e0bafb7a_47af_da1c_08ab_7e0cfe5c227c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/field-example.tsx lines 818–935

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

  return (
    <Example title="OTP Input Fields">
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="otp-basic">Verification Code</FieldLabel>
          <InputOTP id="otp-basic" 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">Enter OTP</FieldLabel>
          <InputOTP
            id="otp-with-desc"
            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">
            Two-Factor Authentication
          </FieldLabel>
          <InputOTP id="otp-separator" 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="otp-pin">PIN Code</FieldLabel>
          <InputOTP
            id="otp-pin"
            maxLength={4}
            pattern={REGEXP_ONLY_DIGITS}
            value={pinValue}
            onChange={setPinValue}
          >
            <InputOTPGroup>
              <InputOTPSlot index={0} />
              <InputOTPSlot index={1} />
              <InputOTPSlot index={2} />
              <InputOTPSlot index={3} />
            </InputOTPGroup>
          </InputOTP>
          <FieldDescription>
            Enter your 4-digit PIN (numbers only).
          </FieldDescription>