125k

Input OTP

PreviousNext

コピー＆ペースト機能を備えたアクセス可能なワンタイム パスワード コンポーネント。

BaseRadixReact Aria
1
2
3
4
5
6
import {
  InputOTP,
  InputOTPGroup,

概要

入力 OTP は、@guilherme_rodz によって input-otp の上に構築されます。

インストール

pnpm dlx shadcn@latest add input-otp

使用法

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/components/ui/input-otp"
<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>

構成

次の構成を使用して InputOTP を構築します。

InputOTP
├── InputOTPGroup
│   ├── InputOTPSlot
│   ├── InputOTPSlot
│   └── InputOTPSlot
├── InputOTPSeparator
├── InputOTPGroup
│   ├── InputOTPSlot
│   ├── InputOTPSlot
│   └── InputOTPSlot
├── InputOTPSeparator
└── InputOTPGroup
    ├── InputOTPSlot
    └── InputOTPSlot

パターン

pattern プロパティを使用して、OTP 入力のカスタム パターンを定義します。

import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
 
;<InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>
  ...
</InputOTP>
"use client"

import { REGEXP_ONLY_DIGITS } from "input-otp"

区切り文字

<InputOTPSeparator /> コンポーネントを使用して、入力グループ間に区切り文字を追加します。

import {
  InputOTP,
  InputOTPGroup,

無効

disabled プロパティを使用して入力を無効にします。

1
2
3
4
5
6
import { Field, FieldLabel } from "@/components/ui/aria/field"
import {
  InputOTP,

制御

value および onChange プロパティを使用して入力値を制御します。

ワンタイムパスワードを入力してください。
"use client"

import * as React from "react"

無効です

エラー状態を表示するには、スロットで aria-invalid を使用します。

0
0
0
0
0
0
"use client"

import * as React from "react"

4 桁

PIN コードの一般的なパターン。これは pattern={REGEXP_ONLY_DIGITS} プロパティを使用します。

"use client"

import { REGEXP_ONLY_DIGITS } from "input-otp"

英数字

文字と数字の両方を受け入れるには、REGEXP_ONLY_DIGITS_AND_CHARS を使用します。

"use client"

import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"

フォーム

ログインを確認
ご登録のメールアドレスに送信された確認コードを入力してください: m@example.com

このメールアドレスにアクセスできなくなった場合

ログインでお困りですか？ サポートに問い合わせ
import { RefreshCwIcon } from "lucide-react"

import { Button } from "@/components/ui/aria/button"

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイド を参照してください。

1
2
3
4
5
6
"use client"

import * as React from "react"

API リファレンス

詳細については、input-otp ドキュメントを参照してください。