Caroa UI

InputOTP

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

インポート

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

基本的な使い方

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>

認証フォーム例

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無効状態

Previous

InputGroup

Next

Form

On this page