Caroa UI

InputOTP

ワンタイムパスワード入力コンポーネント。

インポート

import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@caroainc/ui-components/input-otp'

基本的な使い方

Loading...
<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

4桁のコード

Loading...
<InputOTP maxLength={4}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
  </InputOTPGroup>
</InputOTP>

セパレーターあり（4桁）

Loading...
<InputOTP maxLength={4}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
  </InputOTPGroup>
</InputOTP>

数字専用入力

numericを指定するとinputMode="numeric"とパターン（input-otpのREGEXP_ONLY_DIGITS）が自動設定され、数字以外の入力を防げます。inputMode/patternを明示指定した場合はそちらが優先されます。

<InputOTP maxLength={6} numeric>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
</InputOTP>

認証フォーム例

Loading...
<div className="space-y-4 text-center">
  <div>
    <h3 className="text-lg font-semibold">認証コードを入力</h3>
    <p className="text-sm text-muted-foreground">
      メールに送信された6桁のコードを入力してください
    </p>
  </div>
  <InputOTP maxLength={6}>
    <InputOTPGroup>
      <InputOTPSlot index={0} />
      <InputOTPSlot index={1} />
      <InputOTPSlot index={2} />
    </InputOTPGroup>
    <InputOTPSeparator />
    <InputOTPGroup>
      <InputOTPSlot index={3} />
      <InputOTPSlot index={4} />
      <InputOTPSlot index={5} />
    </InputOTPGroup>
  </InputOTP>
  <Button>認証する</Button>
</div>

Props (InputOTP)

PropTypeDefaultDescription
maxLength*number-入力桁数
valuestring-入力値
onChange(value: string) => void-値が変更された時のコールバック
disabledbooleanfalse無効状態
numericbooleanfalsetrueでinputMode="numeric"とpattern（数字のみ）を自動設定する糖衣構文。inputMode/patternを明示指定した場合はそちらを優先
aria-invalidboolean-エラー状態。trueで各スロットのborderが赤くなる（ネイティブ属性）

Previous

InputGroup

Next

Item

On this page