Neumorphism UI

Input OTP

固定長の認証コードを、文字ごとの枠に表示して入力する場合に使います。

プレビュー

6 桁の認証コード

6 個の枠を 3 桁ずつのグループに分け、中央に区切りを置きます。

プレビューを読み込んでいます。

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/input-otp

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

maxLength と名前を指定し、各位置に対応する InputOTPSlot を置きます。グループと区切りは見た目の整理に使い、値は一つの入力として保持します。

"use client";

import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";

export default function Example() {
  return (
    <InputOTP maxLength={4} aria-label="Verification code" autoComplete="one-time-code">
      <InputOTPGroup>
        <InputOTPSlot index={0} />
        <InputOTPSlot index={1} />
        <InputOTPSlot index={2} />
        <InputOTPSlot index={3} />
      </InputOTPGroup>
    </InputOTP>
  );
}

API リファレンス

フォーカス、貼り付け、自動移動は input-otp に任せ、表示スロットだけをニューモーフィズム表面で装飾します。複数の枠が見えてもアクセシビリティツリーとフォーム値は1つの入力のままです。

コンポーネントプロパティ型デフォルト説明
InputOTPmaxLength必須number—許可する認証コードの長さを指定します。
InputOTPvalue / defaultValuestring—controlled または初期 uncontrolled のコード値を指定します。
InputOTPonChange(value: string) => void—コード全体の値が変わると呼び出されます。
InputOTPcontainerClassNamestring—スロットグループを囲む外側のコンテナを拡張します。
InputOTPSlotindex必須number—コード全体のどの位置をこの表示スロットに出すか指定します。

アクセシビリティ

  • 01

    InputOTP に認証コードの目的を説明する aria-label または関連付けた label を指定します。

  • 02

    複数スロットが見えても、文字ごとに textbox を公開せず実入力は1つに保ちます。

  • 03

    貼り付けやキーボード入力を妨げず、エラーは別の説明テキストに関連付けます。