`<c-otp-input>`

Examples

Basic

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-otp-input
      v-model="code"
      label="OTP"
      hint="Enter the 6-digit code we sent you"
    />

    <p>Code: {{ code ?? 'incomplete' }}</p>
  </div>
</template>

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

const code = ref<string>();
</script>

API reference

`<c-otp-input>`

Properties

Property	Attribute	Type	Default	Description
`elementId`	`element-id`	`string`	`''`	Id of the element
`errorMessage`	`error-message`	`string`	`''`	Error message shown in place of the hint while the input is invalid
`hasAutofocus`	`has-autofocus`	`boolean`	`false`	Auto focus
`hideDetails`	`hide-details`	`boolean`	`false`	Hide the hint and error messages
`hint`	`hint`	`string`	`''`	Hint text for the input
`label`	`label`	`string`	`''`	Label of the input group, shown above the digit inputs
`length`	`length`	`number`	`6`	Length of the OTP code
`required`	`required`	`boolean`	`false`	Set as required — shows the required marker on the label
`valid`	`valid`	`boolean`	`true`	Set the validíty of the input
`value`	`value`	`string`	`''`	Value of the input

Events

Event	Detail	Description
`changeValue`	`null \| string`	Fired on every digit change with the complete code once all digits are filled, or `null` while the code is still incomplete (legacy value-change event). Also dispatched as `change-value` — bind that name in Vue templates.
`completion`	`null \| string`	Fired when the last digit is filled, carrying the complete code.
`input`	`void`	Native bubbling input event for plain `v-model`; carries no detail — the model value is mirrored onto the host's `value` property.
`update:value`	`string`	Fired on every digit change with the currently entered digits (v-model contract).

Slots

Slot	Description
`default`	Fallback content for the group label when the `label` prop is not set

CSS parts

Style from outside with c-otp-input::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The wrapper laying out the label, the digit inputs and the message
`label`	The group label rendered above the digit inputs
`digits`	The inline-grid wrapper around the digit inputs
`input`	Each single-digit `<input>` box (one per digit)