PinEingang

Pininput hinzufügenGitHub
Ein Eingabeelement, um einen Pin einzugeben.

Bearbeiten

Verwenden Sie die v-model-Direktive, um den Wert des PinInput zu steuern.

<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>

Verwenden Sie die default-value-prop, um den Anfangswert festzulegen, wenn Sie den Zustand nicht steuern müssen.

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

type ist ein

Verwenden Sie die type-prop, um den Eingabetyp zu ändern. Standardmäßig text.

<template>
  <UPinInput type="number" />
</template>
Wenn type auf number gesetzt ist, werden nur numerische Zeichen akzeptiert.

Maske

Verwenden Sie die mask-Prop, um die Eingabe wie ein Passwort zu behandeln.

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

OTP

Verwenden Sie die otp-prop, um One-Time Password-Funktionalität zu aktivieren. Wenn aktiviert, können mobile Geräte OTP-Codes automatisch aus SMS-Nachrichten oder Zwischenablage-Inhalten erkennen und ausfüllen, mit Autocomplete-Unterstützung.

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

Platzhalter

Verwenden Sie die placeholder-Prop, um einen Platzhaltertext festzulegen.

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

Length Übersetzung

Verwenden Sie die length-prop, um die Anzahl der Eingänge zu ändern.

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

Separator: badge{label="4.9+" class="align-text-top"} (englisch)

Verwenden Sie die separator prop, um ein Trennzeichen zwischen Gruppen von Eingängen einzufügen. Geben Sie eine Zahl ein, um nach jeder N-ten Eingabe eins einzufügen.

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

Sie können auch ein Array von Positionen übergeben, um Trennzeichen nach bestimmten Eingaben einzufügen.

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

Color (englisch)

Verwenden Sie die color prop, um die Ringfarbe zu ändern, wenn der PinInput fokussiert ist.

<template>
  <UPinInput color="neutral" highlight placeholder="○" />
</template>
Die highlight-prop wird hier verwendet, um den Fokusstatus anzuzeigen. Es wird intern verwendet, wenn ein Validierungsfehler auftritt.

Variant Übersetzung

Verwenden Sie die variant-prop, um die Variante des PinInput zu ändern.

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

Size

Verwenden Sie die size-prop, um die Größe des PinInput zu ändern.

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

Disabled (nicht verfügbar)

Verwenden Sie die disabled prop, um den PinInput zu deaktivieren.

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

Beispiele

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

Verwenden Sie den separator-Steckplatz, um das Erscheinungsbild des Separators anzupassen.

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

API Bearbeiten

Props (englisch)

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; }

Slots Bearbeiten

Slot Type
separator
{ index: number; }

Emits (englisch)

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

Expose (englisch)

Beim Zugriff auf die Komponente über eine Template-Referenz können Sie Folgendes verwenden:

VornameTyp
inputsRefRef<ComponentPublicInstance[]> (nicht)

Theme Bearbeiten

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 (englisch)

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.