Radix Vue

外観

PIN入力 ​

アルファ
1文字の英数字入力のシーケンス。
vue
<script setup lang="ts">
import { ref } from 'vue'
import { Label, PinInputInput, PinInputRoot } from 'radix-vue'

const value = ref<string[]>([])
function handleComplete(e: string[]) {
  // eslint-disable-next-line no-alert
  alert(e.join(''))
}
</script>

<template>
  <div>
    <Label
      for="pin-input"
      class="text-white"
    >Pin Input</Label>
    <PinInputRoot
      id="pin-input"
      v-model="value"
      placeholder="○"
      class="flex gap-2 items-center mt-1"
      @complete="handleComplete"
    >
      <PinInputInput
        v-for="(id, index) in 5"
        :key="id"
        :index="index"
        class="w-10 h-10 bg-white rounded text-center shadow-lg text-green10 placeholder:text-mauve8 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-white"
      />
    </PinInputRoot>
  </div>
</template>

機能 ​

  • フルキーボードナビゲーション。
  • 制御可能または非制御可能です。
  • クリップボードからの貼り付けをサポートします。
  • 入力が完了したときにイベントを発行します。

インストール ​

コマンドラインからコンポーネントをインストールします。

sh
$ npm add radix-vue

構成 ​

すべての部品をインポートして組み立てる。

vue
<script setup>
import { PinInputInput, PinInputRoot } from 'radix-vue'
</script>

<template>
  <PinInputRoot>
    <PinInputInput />
  </PinInputRoot>
</template>

APIリファレンス ​

ルート ​

チェックボックスのすべての部品を含みます。form内で使用した場合、イベントが正しく伝播するようにinputもレンダリングされます。

プロパティデフォルト値型
as
'div'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。

詳細はコンポジションガイドをご覧ください。

defaultValue
string[]

最初にレンダリングされたときのPIN入力のデフォルト値。チェック状態を制御する必要がない場合に使用します。

dir
'ltr' | 'rtl'

該当する場合のコンボボックスの読み取り方向。
省略した場合は、ConfigProviderからグローバルに継承するか、LTR（左から右）の読み取りモードを想定します。

disabled
boolean

trueの場合、ユーザーがPIN入力と対話することを防ぎます。

id
string

要素のID

mask
boolean

trueの場合、PIN入力はパスワードとして扱われます。

modelValue
string[]

PIN入力の制御されたチェック状態。v-modelとしてバインドできます。

name
string

PIN入力の名前。名前/値のペアの一部として、所有するフォームと共に送信されます。

otp
boolean

trueの場合、モバイルデバイスはメッセージまたはクリップボードからOTPを自動検出し、自動入力フィールドを有効にします。

placeholder
''
string

空のPIN入力に使用されるプレースホルダー文字。

required
boolean

trueの場合、所有するフォームを送信する前にユーザーがPIN入力をチェックする必要があることを示します。

type
'text'
'number' | 'text'

入力の入力タイプ。

イベントペイロード
complete
[value: string[]]
update:modelValue
[value: string[]]

値が変更されたときに呼び出されるイベントハンドラー。

スロット (デフォルト)ペイロード
modelValue
string[]

現在の入力値

データ属性値
[data-complete]完了時に表示されます。
[data-disabled]無効な場合に表示されます。

入力 ​

PIN入力の入力フィールド。必要なだけ多くの入力を追加できます。

プロパティデフォルト値型
as
'input'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。

詳細はコンポジションガイドをご覧ください。

disabled
boolean

trueの場合、ユーザーがPIN入力と対話することを防ぎます。

index*
number

この入力がバインドする値の位置。

データ属性値
[data-complete]完了時に表示されます。
[data-disabled]無効な場合に表示されます。

例 ​

OTPモード ​

otpをtrueに設定することで、PIN入力をOTPモードに設定できます。

vue
<script setup lang="ts">
import { Label, PinInputInput, PinInputRoot } from 'radix-vue'
</script>

<template>
  <PinInputRoot v-model="value" otp>
    …
  </PinInputRoot>
</template>

数値モード ​

typeをnumberに設定することで、PIN入力を数値のみを受け入れるように設定できます。

vue
<script setup lang="ts">
import { Label, PinInputInput, PinInputRoot } from 'radix-vue'
</script>

<template>
  <PinInputRoot v-model="value" type="number">
    …
  </PinInputRoot>
</template>

アクセシビリティ ​

キーボード操作 ​

キー説明
矢印左
前の入力にフォーカスします。
矢印右
次の入力にフォーカスします。
ホーム
最初の入力にフォーカスします。
エンド
最後の入力にフォーカスします。
バックスペース
現在の入力の値を削除します。入力が空の場合、前の入力に移動し、その値も削除します。
Delete
現在の入力の値を削除します。
Ctrl + V
クリップボードの内容をPIN入力に貼り付けます。クリップボードの文字数が入力数を超える場合、最初の入力から内容が貼り付けられます。それ以外の場合は、現在の入力以降から内容が貼り付けられます。