Neumorphism UI
フォームと選択@neumorphism-ui/input-otp

Input OTP

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

@neumorphism-ui/input-otp
Registry JSON

プレビュー

インストール

インストール: input-otpnpx shadcn@latest add @neumorphism-ui/input-otp

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定 を完了してください。

使い方

Import

Input OTP の import コード
"use client";
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/components/ui/input-otp";

Example

Input OTP の使用コード
export default function Example() {
  return <InputOTP maxLength={6} defaultValue="123456" aria-label="認証コード">
    <InputOTPGroup>
      <InputOTPSlot index={0} />
      <InputOTPSlot index={1} />
      <InputOTPSlot index={2} />
    </InputOTPGroup>
    <InputOTPSeparator />
    <InputOTPGroup>
      <InputOTPSlot index={3} />
      <InputOTPSlot index={4} />
      <InputOTPSlot index={5} />
    </InputOTPGroup>
  </InputOTP>;
}

API リファレンス

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

アクセシビリティ

  • 01

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

  • 02

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

  • 03

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