Usage
Use the v-model directive to control the value of the PinInput.
<script setup lang="ts">
const value = ref([])
</script>
<template>
<UPinInput v-model="value" />
</template>
Use the default-value prop to set the initial value when you do not need to control its state.
<template>
<UPinInput :default-value="['1', '2', '3']" />
</template>
Type
Use the type prop to change the input type. Defaults to text.
<template>
<UPinInput type="number" />
</template>
type is set to number, it will only accept numeric characters.Mask
Use the mask prop to treat the input like a password.
<template>
<UPinInput mask :default-value="['1', '2', '3', '4', '5']" />
</template>
OTP
Use the otp prop to enable One-Time Password functionality. When enabled, mobile devices can automatically detect and fill OTP codes from SMS messages or clipboard content, with autocomplete support.
<template>
<UPinInput otp />
</template>
Length
Use the length prop to change the amount of inputs.
<template>
<UPinInput :length="6" />
</template>
Placeholder
Use the placeholder prop to set a placeholder text.
<template>
<UPinInput placeholder="○" />
</template>
Color
Use the color prop to change the ring color when the PinInput is focused.
<template>
<UPinInput color="neutral" highlight placeholder="○" />
</template>
highlight prop is used here to show the focus state. It's used internally when a validation error occurs.Variant
Use the variant prop to change the variant of the PinInput.
<template>
<UPinInput color="neutral" variant="subtle" placeholder="○" />
</template>
Size
Use the size prop to change the size of the PinInput.
<template>
<UPinInput size="xl" placeholder="○" />
</template>
Disabled
Use the disabled prop to disable the PinInput.
<template>
<UPinInput disabled placeholder="○" />
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
as |
|
The element or component this component should render as. |
color |
|
|
variant |
|
|
size |
|
|
length |
|
The number of input fields. |
autofocus |
| |
autofocusDelay |
|
|
highlight |
| |
defaultValue |
The default value of the pin inputs when it is initially rendered. Use when you do not need to control its checked state. | |
disabled |
When | |
id |
Id of the element | |
mask |
When | |
modelValue |
The controlled checked state of the pin input. Can be binded as | |
name |
The name of the field. Submitted with its owning form as part of a name/value pair. | |
otp |
When | |
placeholder |
The placeholder character to use for empty pin-inputs. | |
required |
When | |
type |
|
Input type for the inputs. |
ui |
|
Emits
| Event | Type |
|---|---|
update:modelValue |
|
complete |
|
change |
|
blur |
|
Expose
When accessing the component via a template ref, you can use the following:
| Name | Type |
|---|---|
inputsRef | Ref<ComponentPublicInstance[]> |
Theme
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'
]
},
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: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
highlight: {
true: ''
}
},
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'
}
],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline'
}
}
}
})
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 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
'transition-colors'
]
},
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: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
highlight: {
true: ''
}
},
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'
}
],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline'
}
}
}
})
]
})