A six-digit code

// apps/docs/examples/ui/input-otp.tsx'use client';
import {useState} from 'react';
import {  Field,  FieldDescription,  FieldLabel,} from '@workspace/active-ui/components/primitives/field';import {  InputOTP,  InputOTPGroup,  InputOTPSeparator,  InputOTPSlot,  REGEXP_ONLY_DIGITS,} from '@workspace/active-ui/components/primitives/input-otp';
/** * A six-digit code in two groups of three. `REGEXP_ONLY_DIGITS` refuses * anything but digits, typed or pasted; `onComplete` fires when the last * slot is filled. The code is checked here against a fixed value: a real * application sends it to its server. */export default function InputOtpExample() {  const [code, setCode] = useState('');  const [result, setResult] = useState<'valid' | 'invalid' | null>(null);  return (    <Field className="w-fit">      <FieldLabel htmlFor="otp-code">Verification code</FieldLabel>      <InputOTP        id="otp-code"        maxLength={6}        pattern={REGEXP_ONLY_DIGITS}        value={code}        onChange={(value) => {          setCode(value);          setResult(null);        }}        onComplete={(value: string) =>          setResult(value === '123456' ? 'valid' : 'invalid')        }        aria-describedby="otp-code-status"      >        <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 id="otp-code-status" aria-live="polite">        {result === 'valid'          ? 'Code accepted.'          : result === 'invalid'            ? 'That code is not valid. Try 123456 in this example.'            : 'Enter the six digits from the message.'}      </FieldDescription>    </Field>  );}