Pininput

PininputGitHub también
Un elemento de entrada para introducir un pin.

xph0000xUso

Utilice la directiva v-model para controlar el valor del 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>

Utilice el prop default-value para establecer el valor inicial cuando no necesite controlar su estado.

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

Tipo

Utilice la prop type para cambiar el tipo de entrada. Predeterminados a text.

<template>
  <UPinInput type="number" />
</template>
Cuando type se establece en number, sólo aceptará caracteres numéricos.

Máscara

Utilice el prop mask para tratar la entrada como una contraseña.

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

OTP (Edición española)

Utilice el prop otp para habilitar la funcionalidad de contraseña de un solo uso. Cuando está habilitada, los dispositivos móviles pueden detectar y rellenar automáticamente los códigos OTP de los mensajes SMS o el contenido del portapapeles, con soporte de autocompletado.

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

Placeholder (Edición española)

Utilice el prop placeholder para establecer un texto de marcador de posición.

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

Longitud

Utilice el prop length para cambiar la cantidad de entradas.

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

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

Utilice el prop separator para insertar un separador entre grupos de entradas. Pase un número para insertar uno después de cada entrada n. ª.

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

También puede pasar una matriz de posiciones para insertar separadores después de entradas específicas.

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

Color (Edición española)

Utilice el accesorio color para cambiar el color del anillo cuando se enfoca la entrada de pin.

<template>
  <UPinInput color="neutral" highlight placeholder="○" />
</template>
El prop highlight se utiliza aquí para mostrar el estado de enfoque. Se utiliza internamente cuando se produce un error de validación.

Variante

Utilice el prop variant para cambiar la variante del PinInput.

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

Tamaño

Utilice el prop size para cambiar el tamaño de la entrada PinInput.

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

Desactivado

Utilice el prop disabled para desactivar la entrada de pin.

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

Ejemplos

Con ranura separadora: badge{label="4.9+" class="align-text-top"}

Utilice la ranura separator para personalizar la apariencia del separador.

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

API (Edición española)

Props (accesorios)

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

Emisiones

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

Exposición

Al acceder al componente a través de una referencia de plantilla, puede utilizar lo siguiente:

NombreTipo
inputsRefx{lang="ts-type"} (Edición española)Ref<ComponentPublicInstance[]>x{lang="ts-type"}

Temas

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 (Edición española)

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.