Use the v-model directive to control the value of the PinInput.
<script setup lang="ts">
const value = ref([])
</script>
<template>
<PPinInput v-model="value" />
</template>
Use the default-value prop to set the initial value when you do not need to control its state.
<template>
<PPinInput :default-value="['1', '2', '3']" />
</template>
Use the type prop to change the input type. Defaults to text.
<template>
<PPinInput type="number" />
</template>
type is set to number, it will only accept numeric characters.Use the mask prop to treat the input like a password.
<template>
<PPinInput mask :default-value="['1', '2', '3', '4', '5']" />
</template>
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>
<PPinInput otp />
</template>
Use the length prop to change the amount of inputs.
<template>
<PPinInput :length="6" />
</template>
Use the placeholder prop to set a placeholder text.
<template>
<PPinInput placeholder="○" />
</template>
Use the color prop to change the ring color when the PinInput is focused.
<template>
<PPinInput color="neutral" highlight placeholder="○" />
</template>
highlight prop is used here to show the focus state. It's used internally when a validation error occurs.Use the variant prop to change the variant of the PinInput.
<template>
<PPinInput color="neutral" variant="subtle" placeholder="○" />
</template>
Use the size prop to change the size of the PinInput.
<template>
<PPinInput size="xl" placeholder="○" />
</template>
Use the disabled prop to disable the PinInput.
<template>
<PPinInput disabled placeholder="○" />
</template>
| Prop | Default | Type |
|---|
| Event | Type |
|---|
When accessing the component via a template ref, you can use the following:
| Name | Type |
|---|---|
inputsRef | Ref<ComponentPublicInstance[]> |
Below is the theme configuration skeleton for the PPinInput. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
export default defineAppConfig({
pohon: {
pinInput: {
slots: {
root: '',
base: ''
},
variants: {
size: {
xs: {
base: ''
},
sm: {
base: ''
},
md: {
base: ''
},
lg: {
base: ''
},
xl: {
base: ''
}
},
variant: {
outline: '',
soft: '',
subtle: '',
ghost: '',
none: ''
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
highlight: {
true: ''
}
},
compoundVariants: [],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline'
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
pinInput: {
slots: {
root: '',
base: ''
},
variants: {
size: {
xs: {
base: ''
},
sm: {
base: ''
},
md: {
base: ''
},
lg: {
base: ''
},
xl: {
base: ''
}
},
variant: {
outline: '',
soft: '',
subtle: '',
ghost: '',
none: ''
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
highlight: {
true: ''
}
},
compoundVariants: [],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline'
}
}
}
};
With Pohon UI, you can achieve similar component functionality with less code and effort, as it comes with built-in styles mechanism and behaviors that are optimized for common use cases. Since it's using unocss-variants it adds a runtime cost, but it can be worth it if you prioritize development speed and ease of use over fine-grained control.
If this is a deal breaker for you, you can always stick to using Akar and build your own custom components on top of it.