HopeKitAppearance
CodeInput
The code input used for Two Factor Authentification.
Basic Usage
Use fields property to set input cells
<template>
<div class="flex flex-col items-center justify-center bg-gray/40 py-5">
<HcCodeInput
v-model="value"
:fields="6"
/>
<div class="mt-2 h-3">
{{ value }}
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const value = ref('');
</script>
Props
| Property | Type | Values | Description | Default |
|---|---|---|---|---|
| modelValue | String | String | binding value | false |
| fields | Number | Number | set number of empty fields (code length) | 6 |
| filterKeys | String[] | String[] | list of filtered keyboard keys | [ "Minus", "Period" ] |
| filterChars | String[] | String[] | list of filtered chars | [ "-", "." ] |
| filterCharsIsWhitelist | Boolean | Boolean | use filterChars array as whitelist | false |
| autocomplete | Boolean | Boolean | same as autocomplete in native input | undefined |
| forceUppercase | Boolean | Boolean | transform output value to uppercase | false |
| type | String | String | native 'type' attribute | text |
Events
| Property | Type | Values | Description | Default |
|---|---|---|---|---|
| update:model-value | Function | value - string | triggers when the CodeInput value changes | |
| complete | Function | - | triggers when input fullfilled | |
| focus | Function | event - FocusEvent | triggers when CodeInput focuses | |
| blur | Function | value - string | triggers when CodeInput blurs |