CodeInput

One-time code entry shown as separate digit cells. Supports a size prop: xs, sm, md (default), lg, xl.

Import

Vue

import { UiCodeInput } from '@ziyarago/ui/vue'

6 digits

482

Vue

<UiCodeInput label="Verification code" :length="6" v-model="value" />

4 digits

Vue

<UiCodeInput label="PIN" :length="4" v-model="value" />

Sizes

482

Vue

<UiCodeInput size="xs" :length="6" v-model="value" />

<UiCodeInput size="sm" :length="6" v-model="value" />

<UiCodeInput size="md" :length="6" v-model="value" />

<UiCodeInput size="lg" :length="6" v-model="value" />

<UiCodeInput size="xl" :length="6" v-model="value" />

API reference

One-time code input rendered as separate digit cells. Use for SMS or email verification codes.

Props

PropType and valuesDefaultDescription

modelValuev-modelstring''Digits entered so far.

lengthnumber6Number of cells and maximum digits.

labelstring'Code'Accessible name of the hidden input (not rendered visibly).

sizexssmmdlgxl'md'Cell size.

Events

Vue: @name. React: onName.

changeCalled with the digits only (non-digits stripped), at most length characters.

completeCalled once with the full code when the last cell gets filled (also on paste).

Notes

Sets autocomplete="one-time-code" so mobile keyboards offer the SMS code.