Playground

Change any option, try the real component, and copy the matching code. Everything here runs the published package.

Configurator

Every control maps to a prop, and the generated code matches the preview.

Live result

Material UI

Valueempty

Completeno

Completions0

Last rejected inputnone

VerificationCode.tsx

'use client';

import { MuiOtpInput } from '@wh1teee/mui-otp-input';
import { useState } from 'react';

export function VerificationCode() {
  const [code, setCode] = useState('');

  return (
    <MuiOtpInput
      ariaLabel="Verification code"
      length={6}
      value={code}
      onChange={setCode}
      validationType="numeric"
      pastePreprocess="digits-only"
      TextFieldsProps={(index) => ({ sx: index === 2 ? { mr: 2 } : undefined })}
    />
  );
}

With React Hook Form

Submit an incomplete code to see focus move back to the field, or a wrong one to see a server-style error. The right code is 424242.

On the server

This result is computed by a Server Component with the /headless helpers before anything on the page hydrates.

{"complete":true,"pasted":"482913","value":"482913"}