Pininput

Pininput estGitHub à
Un élément d'entrée pour entrer un pin.

Utilisation

Utilisez la directive v-model pour contrôler la valeur de la PinInput.

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

Utilisez la prop default-value pour définir la valeur initiale lorsque vous n'avez pas besoin de contrôler son état.

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

Type écrit

Utilisez la prop type pour changer le type d'entrée. Defaults à text.

<template>
  <UPinInput type="number" />
</template>
Lorsque type est défini sur number, il n'accepte que les caractères numériques.

Masque

Utilisez le prop mask pour traiter l'entrée comme un mot de passe.

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

OTP

Utilisez la prop otp pour activer la fonctionnalité de mot de passe à usage unique. Lorsqu 'elle est activée, les appareils mobiles peuvent détecter et remplir automatiquement les codes OTP à partir de messages SMS ou du contenu du presse-papiers, avec la prise en charge de la saisie automatique.

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

Référencement

Utilisez la prop placeholder pour définir un texte d'espace réservé.

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

longueur

Utilisez le prop length pour changer la quantité d'entrées.

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

Séparateur: badge{label="4.9+" class="align-text-top"}

Utilisez la prop separator pour insérer un séparateur entre les groupes d'entrées. Passez un nombre pour en insérer un après chaque Nème entrée.

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

Vous pouvez également passer un tableau de positions pour insérer des séparateurs après des entrées spécifiques.

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

Couleur

Utilisez le prop color pour changer la couleur de l'anneau lorsque l'Input PinInput est focalisée.

<template>
  <UPinInput color="neutral" highlight placeholder="○" />
</template>
La prop highlight est utilisée ici pour afficher l'état de mise au point. Il est utilisé en interne lorsqu 'une erreur de validation se produit.

Variant équivalent

Utilisez le prop variant pour modifier la variante de la PinInput.

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

Size

Utilisez le prop size pour modifier la taille de la PinInput.

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

Désactivé

Utilisez le prop disabled pour désactiver la PinInput.

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

Exemples

Avec fente de séparation: badge{label="4.9+" class="align-text-top"}

Utilisez le slot separator pour personnaliser l'apparence du séparateur.

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

API écrit

Props équipements

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

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 à

Lorsque vous accédez au composant via une référence de modèle, vous pouvez utiliser les éléments suivants:

nomtype
inputsRefx{lang="ts-type"}Ref<ComponentPublicInstance[]>

Thème

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.