PinInput

PinInputGitLab
Um elemento de input para digitar um PIN.

Uso

Use a diretiva v-model para controlar o valor do PinInput.

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

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

<script setup lang="ts">
import { ref } from 'vue'

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

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

Use a prop default-value para definir o valor inicial quando você não precisa controlar o estado.

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

Tipo

Use a prop type para alterar o tipo do input. O padrão é text.

<template>
  <NPinInput type="number" />
</template>
Quando type é definido como number, ele só aceita caracteres numéricos.

Máscara

Use a prop mask para tratar o input como uma senha.

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

OTP

Use a prop otp para habilitar a funcionalidade de senha de uso único (One-Time Password). Quando habilitada, os dispositivos móveis podem detectar e preencher automaticamente os códigos OTP de mensagens SMS ou do conteúdo da área de transferência, com suporte a autocomplete.

<template>
  <NPinInput otp />
</template>

Placeholder

Use a prop placeholder para definir um texto de placeholder.

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

Comprimento

Use a prop length para alterar a quantidade de inputs.

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

Separador 4.9+

Use a prop separator para inserir um separador entre grupos de inputs. Passe um número para inserir um após cada N-ésimo input.

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

Você também pode passar um array de posições para inserir separadores após inputs específicos.

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

Cor

Use a prop color para alterar a cor do ring quando o PinInput está em foco.

<template>
  <NPinInput color="neutral" highlight placeholder="○" />
</template>
A prop highlight é usada aqui para mostrar o estado de foco. Ela é usada internamente quando ocorre um erro de validação.

Variante

Use a prop variant para alterar a variante do PinInput.

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

Tamanho

Use a prop size para alterar o tamanho do PinInput.

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

Desabilitado

Use a prop disabled para desabilitar o PinInput.

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

Exemplos

Com slot de separador 4.9+

Use o slot separator para personalizar a aparência do separador.

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

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

The number of input fields.

autofocusboolean
autofocusDelay0 number
highlightboolean
fixedboolean

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.

disabledboolean

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

id string

Id of the element

maskboolean

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.

otpboolean

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.

requiredboolean

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]

Expose

Ao acessar o componente por meio de um template ref, você pode usar o seguinte:

NameType
inputsRefRef<ComponentPublicInstance[]>

Tema

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 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
          'transition-colors'
        ],
        separator: 'text-dimmed flex items-center justify-center'
      },
      variants: {
        size: {
          xs: {
            base: 'size-6 text-xs'
          },
          sm: {
            base: 'size-7 text-xs'
          },
          md: {
            base: 'size-8 text-sm'
          },
          lg: {
            base: 'size-9 text-sm'
          },
          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'
        },
        color: {
          primary: '',
          secondary: '',
          accent: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        highlight: {
          true: ''
        },
        fixed: {
          false: ''
        }
      },
      compoundVariants: [
        {
          color: 'primary',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary'
        },
        {
          color: 'primary',
          highlight: true,
          class: 'ring ring-inset ring-primary'
        },
        {
          color: 'neutral',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted'
        },
        {
          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 '@nitro/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 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
              'transition-colors'
            ],
            separator: 'text-dimmed flex items-center justify-center'
          },
          variants: {
            size: {
              xs: {
                base: 'size-6 text-xs'
              },
              sm: {
                base: 'size-7 text-xs'
              },
              md: {
                base: 'size-8 text-sm'
              },
              lg: {
                base: 'size-9 text-sm'
              },
              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'
            },
            color: {
              primary: '',
              secondary: '',
              accent: '',
              success: '',
              info: '',
              warning: '',
              error: '',
              neutral: ''
            },
            highlight: {
              true: ''
            },
            fixed: {
              false: ''
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              variant: [
                'outline',
                'subtle'
              ],
              class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary'
            },
            {
              color: 'primary',
              highlight: true,
              class: 'ring ring-inset ring-primary'
            },
            {
              color: 'neutral',
              variant: [
                'outline',
                'subtle'
              ],
              class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted'
            },
            {
              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 GitLab.

Changelog

No recent changes

Listbox

Uma lista selecionável de itens com busca, virtualização e renderização rica de itens.

RadioGroup

Um conjunto de botões de rádio para selecionar uma única opção em uma lista.