ピン入力

ピン入力サイトマップ
ピンを入力する入力要素。

使用法

PinInputの値を制御するにはv-modelディレクティブを使用します。

<script setup lang="ts">
const value = ref([])
</script>

<template>
  <UPinInput v-model="value" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref([])
</script>

<template>
  <UPinInput v-model="value" />
</template>

状態を制御する必要がない場合は、default-valueプロパティを使用して初期値を設定します。

<template>
  <UPinInput :default-value="['1', '2', '3']" />
</template>

Type

typeプロパティを使用して入力タイプを変更します。デフォルトはtextです。

<template>
  <UPinInput type="number" />
</template>
typeがnumberに設定されている場合、数字のみを受け付けます。

マスク

入力をパスワードのように扱うにはmaskプロパティを使用します。

<template>
  <UPinInput mask :default-value="['1', '2', '3', '4', '5']" />
</template>

OTP

otpプロパティを使用して、ワンタイムパスワード機能を有効にします。有効にすると、モバイルデバイスはSMSメッセージやクリップボードのコンテンツからOTPコードを自動的に検出して入力します。

<template>
  <UPinInput otp />
</template>

Placeholder

placeholderプロパティを使用してプレースホルダーテキストを設定します。

<template>
  <UPinInput placeholder="○" />
</template>

Length

lengthプロパティを使用して入力量を変更します。

<template>
  <UPinInput :length="6" placeholder="○" />
</template>

Separator badge{label="4.9+" class="align-text-top"}

separatorプロパティを使用して、入力のグループ間に区切り文字を挿入します。N番目の入力ごとに挿入するには、数値を渡します。

<template>
  <UPinInput :length="6" :separator="3" placeholder="○" />
</template>

位置の配列を渡して、特定の入力の後に区切り文字を挿入することもできます。

<template>
  <UPinInput :length="7" :separator="[3, 4]" placeholder="○" />
</template>

Color

PinInputがフォーカスされたときにリングの色を変更するには、colorプロパティを使用します。

<template>
  <UPinInput color="neutral" highlight placeholder="○" />
</template>
highlightプロパティはフォーカスの状態を示すために使用されます。バリデーションエラーが発生したときに内部で使用されます。

Variant

variantプロパティを使用して、PinInputのバリアントを変更します。

<template>
  <UPinInput color="neutral" variant="subtle" placeholder="○" />
</template>

Size

sizeプロパティを使用して、PinInputのサイズを変更します。

<template>
  <UPinInput size="xl" placeholder="○" />
</template>

無効

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

<template>
  <UPinInput disabled placeholder="○" />
</template>

例

セパレータースロット付きbadge{label="4.9+" class="align-text-top"}

separatorスロットを使用してセパレータの外観をカスタマイズします。

<template>
  <UPinInput :length="6" :separator="3" placeholder="○">
    <template #separator>
      <UIcon name="i-lucide-minus" class="size-4" />
    </template>
  </UPinInput>
</template>

API

Props

Prop Default Type
as
'div'
any

The element or component this component should render as.

color
'primary'
"primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"
variant
'outline'
"outline" | "soft" | "subtle" | "ghost" | "none"
size
'md'
"xs" | "sm" | "md" | "lg" | "xl"
length
5
string | number

The number of input fields.

autofocus
boolean
autofocusDelay
0
number
highlight
boolean
fixed
boolean

Keep the mobile text size on all breakpoints.

separator
number | number[]

Group inputs by inserting a separator between them. Pass a number to insert one after every Nth input, or an array of positions to insert after specific inputs.

defaultValue
PinInputValue<T>

The default value of the pin inputs when it is initially rendered. Use when you do not need to control its checked state.

disabled
boolean

When true, prevents the user from interacting with the pin input

id
string

Id of the element

mask
boolean

When true, pin inputs will be treated as password.

modelValue
null | PinInputValue<T>

The controlled checked state of the pin input. Can be binded as v-model.

name
string

The name of the field. Submitted with its owning form as part of a name/value pair.

otp
boolean

When true, mobile devices will autodetect the OTP from messages or clipboard, and enable the autocomplete field.

placeholder
string

The placeholder character to use for empty pin-inputs.

required
boolean

When true, indicates that the user must set the value before the owning form can be submitted.

type
'text'
T

Input type for the inputs.

ui
{ root?: SlotClass; base?: SlotClass; separator?: SlotClass; }

スロット

Slot Type
separator
{ index: number; }

Emits

Event Type
update:modelValue
[value: PinInputValue<T>]
complete
[value: PinInputValue<T>]
change
[event: Event]
blur
[event: Event]
focus
[event: Event]

Expose

テンプレート参照を介してコンポーネントにアクセスする場合、以下を使用できます：

名前タイプ
inputsRefRef<ComponentPublicInstance[]>

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    pinInput: {
      slots: {
        root: 'relative inline-flex items-center gap-1.5',
        base: [
          'rounded-md border-0 placeholder:text-dimmed text-center disabled:cursor-not-allowed disabled:opacity-75',
          'transition-colors'
        ],
        separator: 'text-dimmed flex items-center justify-center'
      },
      variants: {
        size: {
          xs: {
            base: 'size-6 text-sm/4'
          },
          sm: {
            base: 'size-7 text-sm/4'
          },
          md: {
            base: 'size-8 text-base/5'
          },
          lg: {
            base: 'size-9 text-base/5'
          },
          xl: {
            base: 'size-10 text-base'
          }
        },
        variant: {
          outline: 'text-highlighted bg-default ring ring-inset ring-accented',
          soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
          subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
          ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
          none: 'text-highlighted bg-transparent focus:outline-none'
        },
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        highlight: {
          true: ''
        },
        fixed: {
          false: ''
        }
      },
      compoundVariants: [
        {
          color: 'primary',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary'
        },
        {
          color: 'primary',
          variant: [
            'soft',
            'ghost'
          ],
          class: 'outline-primary/25 focus-visible:outline-3'
        },
        {
          color: 'primary',
          highlight: true,
          class: 'ring ring-inset ring-primary'
        },
        {
          color: 'neutral',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted'
        },
        {
          color: 'neutral',
          variant: [
            'soft',
            'ghost'
          ],
          class: 'outline-inverted/25 focus-visible:outline-3'
        },
        {
          color: 'neutral',
          highlight: true,
          class: 'ring ring-inset ring-inverted'
        },
        {
          fixed: false,
          size: 'xs',
          class: 'md:text-xs'
        },
        {
          fixed: false,
          size: 'sm',
          class: 'md:text-xs'
        },
        {
          fixed: false,
          size: 'md',
          class: 'md:text-sm'
        },
        {
          fixed: false,
          size: 'lg',
          class: 'md:text-sm'
        }
      ],
      defaultVariants: {
        size: 'md',
        color: 'primary',
        variant: 'outline'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        pinInput: {
          slots: {
            root: 'relative inline-flex items-center gap-1.5',
            base: [
              'rounded-md border-0 placeholder:text-dimmed text-center disabled:cursor-not-allowed disabled:opacity-75',
              'transition-colors'
            ],
            separator: 'text-dimmed flex items-center justify-center'
          },
          variants: {
            size: {
              xs: {
                base: 'size-6 text-sm/4'
              },
              sm: {
                base: 'size-7 text-sm/4'
              },
              md: {
                base: 'size-8 text-base/5'
              },
              lg: {
                base: 'size-9 text-base/5'
              },
              xl: {
                base: 'size-10 text-base'
              }
            },
            variant: {
              outline: 'text-highlighted bg-default ring ring-inset ring-accented',
              soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
              subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
              ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
              none: 'text-highlighted bg-transparent focus:outline-none'
            },
            color: {
              primary: '',
              secondary: '',
              success: '',
              info: '',
              warning: '',
              error: '',
              neutral: ''
            },
            highlight: {
              true: ''
            },
            fixed: {
              false: ''
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              variant: [
                'outline',
                'subtle'
              ],
              class: 'outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary'
            },
            {
              color: 'primary',
              variant: [
                'soft',
                'ghost'
              ],
              class: 'outline-primary/25 focus-visible:outline-3'
            },
            {
              color: 'primary',
              highlight: true,
              class: 'ring ring-inset ring-primary'
            },
            {
              color: 'neutral',
              variant: [
                'outline',
                'subtle'
              ],
              class: 'outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted'
            },
            {
              color: 'neutral',
              variant: [
                'soft',
                'ghost'
              ],
              class: 'outline-inverted/25 focus-visible:outline-3'
            },
            {
              color: 'neutral',
              highlight: true,
              class: 'ring ring-inset ring-inverted'
            },
            {
              fixed: false,
              size: 'xs',
              class: 'md:text-xs'
            },
            {
              fixed: false,
              size: 'sm',
              class: 'md:text-xs'
            },
            {
              fixed: false,
              size: 'md',
              class: 'md:text-sm'
            },
            {
              fixed: false,
              size: 'lg',
              class: 'md:text-sm'
            }
          ],
          defaultVariants: {
            size: 'md',
            color: 'primary',
            variant: 'outline'
          }
        }
      }
    })
  ]
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

Changelog

No recent changes

Listbox

A selectable list of items with search, virtualization and rich item rendering.

RadioGroup

A set of radio buttons to select a single option from a list.