OTP Field

import { OTPField } from '@hamur/react/otp-field'

const CODE_LENGTH = 6
const slots = Array.from({ length: CODE_LENGTH }, (_, index) => index)

export default function OTPFieldAlphanumericExample() {
  return (
    <div className="field">
      <label htmlFor="otp-alphanumeric">Recovery code</label>
      <OTPField.Root
        id="otp-alphanumeric"
        className="otp"
        length={CODE_LENGTH}
        validationType="alphanumeric"
        aria-describedby="otp-alphanumeric-description"
      >
        {slots.map((index) => (
          <OTPField.Input
            key={index}
            className="input otp-input"
            aria-label={index === 0 ? undefined : `Character ${index + 1} of ${CODE_LENGTH}`}
          />
        ))}
      </OTPField.Root>
      <p id="otp-alphanumeric-description" className="muted">
        Accept letters and numbers for backup codes such as <code className="code">A7C9XZ</code>.
      </p>
    </div>
  )
}

import { OTPField } from '@hamur/react/otp-field'

const OTP_LENGTH = 6

export default function OTPFieldGroupedExample() {
  return (
    <div className="field">
      <label htmlFor="otp-grouped">Verification code</label>
      <OTPField.Root id="otp-grouped" className="otp" length={OTP_LENGTH}>
        <div className="otp-group">
          {[0, 1, 2].map((index) => (
            <OTPField.Input
              key={index}
              className="input otp-input"
              aria-label={index === 0 ? undefined : `Character ${index + 1} of ${OTP_LENGTH}`}
            />
          ))}
        </div>
        <OTPField.Separator className="otp-separator" />
        <div className="otp-group">
          {[3, 4, 5].map((index) => (
            <OTPField.Input
              key={index}
              className="input otp-input"
              aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}
            />
          ))}
        </div>
      </OTPField.Root>
    </div>
  )
}

import * as React from 'react'
import { OTPField } from '@hamur/react/otp-field'

const CODE_LENGTH = 6
const slots = Array.from({ length: CODE_LENGTH }, (_, index) => index)

function normalizeRecoveryCode(value: string) {
  return value.toUpperCase()
}

/** A shake on the focused slot and a polite message when a character is rejected. */
function useInvalidFeedback() {
  const [focusedIndex, setFocusedIndex] = React.useState(0)
  const [invalidPulse, setInvalidPulse] = React.useState(0)
  const [statusMessage, setStatusMessage] = React.useState('')
  const timeout = React.useRef<ReturnType<typeof setTimeout> | null>(null)
  const skipClear = React.useRef(false)

  React.useEffect(
    () => () => {
      if (timeout.current != null) clearTimeout(timeout.current)
    },
    [],
  )

  function handleValueChange() {
    if (skipClear.current) {
      skipClear.current = false
      return
    }
    if (timeout.current != null) clearTimeout(timeout.current)
    timeout.current = null
    setInvalidPulse(0)
    setStatusMessage('')
  }

  function handleValueInvalid(value: string) {
    skipClear.current = true
    setInvalidPulse((current) => current + 1)
    setStatusMessage(`Unsupported characters were ignored from ${value}.`)
    if (timeout.current != null) clearTimeout(timeout.current)
    timeout.current = setTimeout(() => {
      timeout.current = null
      setInvalidPulse(0)
    }, 400)
  }

  return {
    activeInvalidIndex: invalidPulse > 0 ? focusedIndex : -1,
    invalidClass:
      invalidPulse === 0 ? '' : invalidPulse % 2 === 0 ? 'otp-invalid-b' : 'otp-invalid-a',
    statusMessage,
    setFocusedIndex,
    handleValueChange,
    handleValueInvalid,
  }
}

export default function OTPFieldCustomSanitizeExample() {
  const feedback = useInvalidFeedback()
  return (
    <div className="field">
      <label htmlFor="otp-sanitize">Recovery code</label>
      <OTPField.Root
        id="otp-sanitize"
        className="otp"
        length={CODE_LENGTH}
        validationType="alphanumeric"
        normalizeValue={normalizeRecoveryCode}
        aria-describedby="otp-sanitize-description"
        onValueChange={feedback.handleValueChange}
        onValueInvalid={feedback.handleValueInvalid}
      >
        {slots.map((index) => (
          <OTPField.Input
            key={index}
            className={`input otp-input ${feedback.activeInvalidIndex === index ? feedback.invalidClass : ''}`.trim()}
            aria-label={index === 0 ? undefined : `Character ${index + 1} of ${CODE_LENGTH}`}
            onFocus={() => feedback.setFocusedIndex(index)}
          />
        ))}
      </OTPField.Root>
      <p id="otp-sanitize-description" className="muted">
        Letters and digits only. Letters are converted to uppercase.
      </p>
      <span aria-live="polite" className="sr-only">
        {feedback.statusMessage}
      </span>
    </div>
  )
}

import { OTPField } from '@hamur/react/otp-field'

const CODE_LENGTH = 6
const slots = Array.from({ length: CODE_LENGTH }, (_, index) => index)

export default function OTPFieldPasswordExample() {
  return (
    <div className="field">
      <label htmlFor="otp-password">Access code</label>
      <OTPField.Root
        id="otp-password"
        className="otp"
        length={CODE_LENGTH}
        mask
        aria-describedby="otp-password-description"
      >
        {slots.map((index) => (
          <OTPField.Input
            key={index}
            className="input otp-input"
            aria-label={index === 0 ? undefined : `Character ${index + 1} of ${CODE_LENGTH}`}
          />
        ))}
      </OTPField.Root>
      <p id="otp-password-description" className="muted">
        Use <code className="code">mask</code> to obscure the code on shared screens.
      </p>
    </div>
  )
}