Otp — usage examples

Otp ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

tsx

import { useState } from 'react';
import { Otp } from '@rozie-ui/otp-react';

export function Demo() {
  const [code, setCode] = useState<string>('');
  return (
    <Otp
      value={code}
      onValueChange={setCode}
      length={6}
      type="numeric"
      ariaLabel="Verification code"
      onComplete={(e) => console.log('code complete:', e.value)}
    />
  );
}

// Masked (password dots) — for sensitive codes.
export function PinDemo() {
  const [pin, setPin] = useState<string>('');
  return <Otp value={pin} onValueChange={setPin} length={4} mask ariaLabel="PIN" />;
}

vue

<script setup lang="ts">
import { ref } from 'vue';
import Otp from '@rozie-ui/otp-vue';

const code = ref<string>('');
function onComplete(e: { value: string }) {
  console.log('code complete:', e.value);
}
</script>

<template>
  <Otp v-model:value="code" :length="6" type="numeric" aria-label="Verification code" @complete="onComplete" />

  <!-- Masked (password dots) -->
  <Otp v-model:value="code" :length="4" mask aria-label="PIN" />
</template>

svelte

<script lang="ts">
  import Otp from '@rozie-ui/otp-svelte';

  let code = $state<string>('');
</script>

<Otp
  bind:value={code}
  length={6}
  type="numeric"
  ariaLabel="Verification code"
  oncomplete={(e) => console.log('code complete:', e.value)}
/>

<!-- Masked (password dots) -->
<Otp bind:value={code} length={4} mask ariaLabel="PIN" />

import { Component } from '@angular/core';
import { Otp } from '@rozie-ui/otp-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Otp],
  template: `
    <Otp [(value)]="code" [length]="6" type="numeric" ariaLabel="Verification code" (complete)="onComplete($event)" />

    <!-- Masked (password dots) -->
    <Otp [(value)]="code" [length]="4" [mask]="true" ariaLabel="PIN" />
  `,
})
export class DemoComponent {
  code = '';
  onComplete(e: { value: string }) {
    console.log('code complete:', e.value);
  }
}

tsx

import { createSignal } from 'solid-js';
import { Otp } from '@rozie-ui/otp-solid';

export function Demo() {
  const [code, setCode] = createSignal<string>('');
  return (
    <Otp
      value={code()}
      onValueChange={setCode}
      length={6}
      type="numeric"
      ariaLabel="Verification code"
      onComplete={(e) => console.log('code complete:', e.value)}
    />
  );
}

import '@rozie-ui/otp-lit';

// <rozie-otp> is a custom element. Bind `value`/`length`/`type` as properties,
// listen for `value-change` to receive the new code as the two-way value, and
// `complete` when every cell is filled.
const el = document.querySelector('rozie-otp');
el.length = 6;
el.type = 'numeric';
el.value = '';
el.addEventListener('value-change', (e) => {
  el.value = e.detail;
});
el.addEventListener('complete', (e) => {
  console.log('code complete:', e.detail.value);
});

Imperative handle

Beyond props and events, Otp exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

tsx

import { useRef } from 'react';
import { Otp, type OtpHandle } from '@rozie-ui/otp-react';

const otp = useRef<OtpHandle>(null);
// <Otp ref={otp} ... />
otp.current?.focus();
otp.current?.clear();

vue

<script setup>
import { ref } from 'vue';
const otp = ref();          // template ref
</script>

<template>
  <Otp ref="otp" v-model:value="code" />
  <button @click="otp.clear()">Clear</button>
</template>

svelte

<script>
  let otp;                  // component instance via bind:this
</script>

<Otp bind:this={otp} bind:value={code} />
<button onclick={() => otp.clear()}>Clear</button>

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(Otp) otp!: Otp;   // or the viewChild() signal
  focusIt() { this.otp.focus(); }
  clearIt() { this.otp.clear(); }
}

tsx

import { Otp, type OtpHandle } from '@rozie-ui/otp-solid';

let handle: OtpHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<Otp ref={(h) => (handle = h)} value={code()} />;
handle?.clear();

// The custom element IS the handle — exposed methods are public element
// methods. `focus()` here DELIBERATELY overrides the inherited
// HTMLElement.focus (it focuses the first empty cell).
const el = document.querySelector('rozie-otp');
el.focus();
el.clear();

Otp — usage examples ​

Usage ​

Imperative handle ​

See also ​

Otp — usage examples

Usage

Imperative handle

See also