PinInput

PinInputGitHub
Een invoerelement om een pin in te voeren.

Gebruik

Gebruik de v-model-richtlijn om de waarde van de PinInput te regelen.

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

Gebruik de default-value prop om de beginwaarde in te stellen wanneer u de status niet hoeft te regelen.

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

Type

Gebruik de type prop om het ingangstype te wijzigen. Standaard ingesteld op text.

<template>
  <UPinInput type="number" />
</template>
Als type is ingesteld op number, accepteert het alleen numerieke tekens.

Masker

Gebruik de mask prop om de invoer als een wachtwoord te behandelen.

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

OTP

Gebruik de otp-prop om One-Time Password-functionaliteit in te schakelen. Indien ingeschakeld, kunnen mobiele apparaten automatisch OTP-codes detecteren en vullen vanuit sms-berichten of klembordinhoud, met ondersteuning voor automatisch aanvullen.

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

Plaatshouder

Gebruik de placeholder prop om een tijdelijke aanduiding in te stellen.

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

Lengte

Gebruik de length prop om het aantal ingangen te wijzigen.

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

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

Gebruik de separator-prop om een scheidingsteken tussen groepen ingangen in te voegen. Geef een nummer door om er een in te voegen na elke Nth-invoer.

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

U kunt ook een reeks posities doorgeven om scheidingstekens in te voegen na specifieke invoer.

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

Kleur

Gebruik de color prop om de ringkleur te veranderen wanneer de PinInput is scherpgesteld.

<template>
  <UPinInput color="neutral" highlight placeholder="○" />
</template>
De highlight prop wordt hier gebruikt om de focusstatus weer te geven. Het wordt intern gebruikt wanneer er een validatiefout optreedt.

Variant

Gebruik de variant prop om de variant van de PinInput te wijzigen.

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

Grootte

Gebruik de size prop om de grootte van de PinInput te wijzigen.

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

Uitgeschakeld

Gebruik de disabled prop om de PinInput uit te schakelen.

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

Voorbeelden

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

Gebruik de separator-sleuf om het uiterlijk van de scheider aan te passen.

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

Slots

Slot Type
separator
{ index: number; }

Uitzendt

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

Expose

Wanneer u de component opent via een sjabloonref, kunt u het volgende gebruiken:

NaamType
inputsRefRef<ComponentPublicInstance[]>

Thema

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.

Wijzigingsgelog

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.